2

どのブラウザーでも、どの画面サイズでも同じように表示されるように画像を配置する方法が必要です。画像を灰色のテーブルの上に配置する必要がありますが、少し左にオフセットします。左から特定のピクセル数だけ写真をオフセットすると、一方のブラウザーでは正しく表示され、もう一方のブラウザーでは正しく表示されません。以下のコードを参照してください。ありがとう！

<style type="text/css">
<!-- table, td, th {
    padding: 5px;
}
div.table-foreground {
    position:relative;
}
div.table-foreground img {
    position:absolute;
    top:50%;
}
.table1 {
    background-color:white;
    background-repeat:no-repeat;
    color:black;
    text-align: center;
    margin: auto;
    font-family:sans-serif;
    table-layout:fixed;
    width: 960px;
}
.table2 {
    background-color:#daf3fb;
    color:black;
    text-align: left;
    margin:auto;
    font-family:sans-serif;
    table-layout:fixed;
    width: 475px;
}
.table3 {
    background-color:#e8ebed;
    color:black;
    text-align: left;
    margin:auto;
    font-family:Helvetica, sans-serif;
    border: solid 2px white;
    outline: solid 1px gray;
    table-layout:fixed;
    width: 375px;
    height:300px;
}
-->
</style>
<body>
<div class="table-foreground">
    <!--img set to relative.-->
    <img id="img1"
src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"
    style="left:520px;top:100px;" />
</div>
<table class="table1">
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
    <tr>
        <td>
            <table class="table2">
                <tr>
                    <td>Text 4</td>
                </tr>
                <tr>
                    <td>Text 5</td>
                </tr>
                <tr>
                    <td>Text 6</td>
                </tr>
                <tr>
                    <td>Text 7</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="table3">
                <tr>
                    <td>Text 8</td>
                </tr>
                <tr>
                    <td>Text 9</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
4

1 に答える 1

1

img を灰色のテーブル (table3) に対して相対的に絶対配置する必要がある場合は、img とテーブルを相対配置された div 内に配置する必要があります。

デモ: http://jsfiddle.net/qeB2t/

<table class="table1">
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
    <tr>
        <td>
            <table class="table2">
                <tr>
                    <td>Text 4</td>
                </tr>
                <tr>
                    <td>Text 5</td>
                </tr>
                <tr>
                    <td>Text 6</td>
                </tr>
                <tr>
                    <td>Text 7</td>
                </tr>
            </table>
        </td>
        <td>
            <div class="table-foreground">
            <img id="img1"
src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"
             />
            <table class="table3">
                <tr>
                    <td>Text 8</td>
                </tr>
                <tr>
                    <td>Text 9</td>
                </tr>
            </table>
            </div>
        </td>
    </tr>
</table>

CSS

div.table-foreground img {
    position:absolute;
    top:50px;
    left: 30px;
}
于 2013-01-21T17:26:10.857 に答える