Question

我所拥有的是一张桌子，我希望将它放在页面的中央，桌子两侧各有两个横幅广告，左右广告尽可能靠近页面的边缘。可能是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。

Answer 1

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

        <!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>

Answer 2

接近它的一种方法是：

<!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>

HTML表大小调整问题

2 个答案: