0

我有一张桌子，我想把它放在页面中央，桌子两边有两个横幅广告，左边和右边的广告尽可能靠近页面边缘，可能有 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

一种接近它的方法是这样的：

<!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 回答
0

这是您需要的代码，（复制 - 粘贴并在浏览器中查看结果。）

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <style>
     .left-ad {
         float: left;
         width: 94px;
         min-height: 500px;
         padding-left: 10px;
         border:1px solid black;
     }
     .right-ad {
         float: right;
         width: 160px;
         min-height: 500px;
         padding-right: 10px;
         border:1px solid black;
     }
     table.tl {
         display: inline;
         float: left;
         min-height: 100px;
         padding: 0 10px;
         width: 71%;
     }
      </style>
     </HEAD>

     <BODY>
      <div class="left-ad">[adsense stuff]</div>
    <table class="tl" border = "1">
        <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>

     </BODY>
    </HTML>
于 2013-05-04T06:08:03.033 回答