我有一个很常见的布局问题，我传统上使用一个表来解决，但想要一些建议，使它完成与CSS。我有3张图片，化妆“容器”。左右图像通常只是使用标签显示，中心图像显示为我的内容的“背景图像”，因此内容似乎在容器中，我相信你已经看到/使用这一百万次：
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
关于这一点的好处是，表格的宽度始终是浏览器(或父级)和中间列的宽度，其中内容是动态大小来占用左/右图像之间的剩余空间。
我想要的是使用CSS重新创建它，尽可能少的硬编码信息。所以这样的事情
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
这样做对于中间的div-how来说，我设置的宽度很大吗？现在我可以硬编码，比如92％等等，但是我想要的是让它自动填充空间。可以使用CSS吗？
解决方法
尝试
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
要么
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
