0

我有 4 个居中的表格（页眉、导航、内容、页脚）：

<table id="header" width="760" align="center">...</table>
<table id="navigation" width="760" align="center">...</table>

<table width="760" height="28" border="0" align="center" id="content">
    ...
</table>

<table id="footer" width="760" align="center">...</table>

我已经从上面的示例中删除了一些代码（边框、单元格填充等）。这使得表格位于屏幕的中心并且宽度 = 760。在这种情况下，屏幕的左右边距包含一些空白。我需要在这些空白处放置 4 个图像（表格左侧的两个图像；图像将垂直放置；右侧的两个图像 - 也位于另一个图像的顶部）。

所以，可能我需要创建两个 div（左 div 和右 div）。我需要这些 Div 与所有表格的左侧和所有表格的右侧对齐。

左 DIV|所有表格| 右分区

图像具有最大允许宽度，但它们没有任何预定义的高度。

我不知道该怎么做...我通常做后端，所以我不需要太多 CSS。但不是在这个项目中......通常我不使用表格而是使用 Divs 进行布局，然后我会使用 position="relative" 作为左右 Divs，但它似乎不适用于表格。

请给我一些线索好吗？

4

1 回答 1

2

您必须将表格包装在 div 中。看看这个jsfiddle。您可以根据自己的喜好调整css，但这就是您做自己想做的事情的方式。

编辑 添加了 clearfix 而不是overflow: hidden;，并在每一侧添加了两个图像。
EDIT2这里是如何使布局居中。jsfiddle

<div id="wrapper clearfix">
  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
  </div>

  <div class="main-content">
    tables
  </div>

  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
  </div>
</div>​



.side-div {
    float: left;
    width: 60px;
    min-height: 100px;
    background-color: #ccc;
    padding: 0 10px;
}

.main-content {
    float: left;
    min-height: 100px;
    background-color: #ccddff;
    padding: 0 10px;
}

/*clearfix instead of overflow: hidden;*/

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

.clearfix {
    display: block;
}

​</p>

于 2013-01-01T11:16:58.637 回答