CSS布局 – 动态宽度DIV

我有一个很常见的布局问题，我传统上使用一个表来解决，但想要一些建议，使它完成与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>

原文地址：https://www.jb51.cc/css/218438.html