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

我从上面的示例中删除了一些代码（border，cellpadding等） 这使得表格位于屏幕的中心，宽度= 760。 在这种情况下，屏幕的左右边距包含一些空白区域。 我需要在这些白色空间中放置4个图像（桌子左侧的两个图像;图像垂直放置;右侧的两个图像 - 也位于另一个图像的顶部）。

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

LEFT DIV |所有表格|右翼

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

我不知道怎么做... 我通常做后端，所以我不需要CSS。但不是在这个项目中......通常我不使用Tables而是Divs进行布局，然后我会使用position =“relative”来表示Left和Right Divs，但似乎它不能用于表格。

你能告诉我一些线索吗？

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;
}