0

私が持っているのは、ページの中央に配置し、テーブルの両側に 2 つのバナー広告を配置したいテーブルです。左右の広告は、おそらく 5px でページの端にできるだけ近づけます。マージン。私はすでにそれを用意していますが、テーブルも広告に近づけたいと思っています. 画面の解像度によっては、表が大きすぎて広告が次の行に移動したり、11 インチの画面では表が小さすぎたりします。

問題のスクリーンショットを撮りました。ここで確認できます。

i.imgur.com/SCypuj2.png.

問題は、右側の広告を見るとテーブルから遠く離れていることですが、それは画面の解像度によって変化します。小さいモニターなら完璧か、小さすぎて広告が次の行に押し出されるかのどちらかです。

HTML: 

<div class="left-ad">[adsense stuff]</div>
<table class="tl">
    <tr>
        <th width="100%" colspan="3">Filename</th>
        <th>Size&nbsp;
            <img src="./images/icons/size.gif" alt="Sort" />

        </th>
        <th>Downloaded&nbsp;
            <img src="./images/icons/down.png">
        </th>
        <th>Date Added&nbsp;
            <img src="./images/icons/added.png">
        </th>
    </tr>
<div class="right-ad">[adsense stuff]</div>

CSS:

 .left-ad {
     float: left;
     width: 160px;
     min-height: 100px;
     padding-left: 10px;
 }
 .right-ad {
     float: right;
     width: 160px;
     min-height: 100px;
     padding-right: 10px;
 }
 table.tl {
     display: inline;
     float: left;
     min-height: 100px;
     padding: 0 10px;
     width: 71%;
 }

fiddleも更新しました。

4

2 に答える 2

0

それにアプローチする1つの方法は次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.wrap {position: relative;}
.left-ad, .right-ad {width: 160px; height: 200px; background: gray; position: absolute; top: 0;}
.left-ad {left: 10px;}
.right-ad {right: 10px;}
table {margin-left: 180px; margin-right: 180px; background: blue;}
</style>

</head>
<body>

<div class="wrap">
    <div class="left-ad">[adsense stuff]</div>

    <table class="tl">
        <tr>
            <th width="100%" colspan="3">Filename</th>
            <th>Size&nbsp;
                <img src="./images/icons/size.gif" alt="Sort" />

            </th>
            <th>Downloaded&nbsp;
                <img src="./images/icons/down.png">
            </th>
            <th>Date Added&nbsp;
                <img src="./images/icons/added.png">
            </th>
        </tr>
    </table>

    <div class="right-ad">[adsense stuff]</div>
</div>

</body>
</html>
于 2013-05-04T06:11:47.770 に答える