我有一个表格，我想将其放置在页面中央，表格两侧有两个横幅广告，左侧和右侧广告尽可能靠近页面边缘可能有 5px 的边距。我已经准备好了，但我希望 table 也能尽可能靠近广告。发生的情况是，根据屏幕分辨率，表格要么太大，因此将广告移到下一行，要么如果在 11 英寸屏幕上，表格太小。
我已经截取了我的问题的屏幕截图，可以在此处找到:
.
问题是，如果您看右边的广告，它离 table 很远，但由于屏幕分辨率的不同而有所不同。如果它是一个小显示器，它要么是完美的，要么太小并将广告推到下一行。
HTML:
<div class="left-ad">[adsense stuff]</div>
<table class="tl">
<tr>
<th width="100%" colspan="3">Filename</th>
<th>Size
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<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 .
最佳答案
这是您需要的代码，(复制-粘贴并在浏览器中查看结果。)
<!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
<img src="./images/icons/size.gif" alt="Sort" />
</th>
<th>Downloaded
<img src="./images/icons/down.png">
</th>
<th>Date Added
<img src="./images/icons/added.png">
</th>
</tr>
<div class="right-ad">[adsense stuff]</div>
</BODY>
</HTML>
关于HTML 表格大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16370930/