css - 将 div 与居中的表格左侧的 2 个图像对齐

Question

我有 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>

我已经从上面的示例中删除了一些代码(边框、cellpadding 等)这使得表格位于屏幕中央并且宽度为 760。在这种情况下，屏幕的左右边缘包含一些空白。我需要在这些空白处放置 4 张图片( table 左侧有两张图片；图片将垂直放置；右侧有两张图片 - 也将一张图片放在另一张图片的顶部)。

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

LEFT DIV|所有表格|右格

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

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

你能给我一些线索吗？

Answer 1

您必须将表格包装在一个 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;
}