CSS 布局 - 动态宽度 DIV

Question

我有一个非常常见的布局问题，传统上我一直使用表格来解决这个问题，但希望获得一些关于如何使用 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 非常有效 - 我如何设置宽度？现在我可以将它硬编码为 92% 等。但我想要的是它自动填充空间。可以仅使用 CSS 来完成吗？

Answer 1

尝试

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