CSS布局-动态宽度DIV
CSS布局-动态宽度DIV
提问于 2009-08-31 19:30:50
我有一个非常常见的布局问题，我传统上是使用表来解决的，但我想要一些关于如何使用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就能做到吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-08-31 20:54:23
试一试
<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>Stack Overflow用户
发布于 2009-08-31 19:45:17
这会做你想做的事。固定宽度为50px的边框，内容将填充剩余区域。
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>Stack Overflow用户
发布于 2009-08-31 19:45:36
或者，如果您知道两个“边”图像的宽度，并且不想处理浮点数：
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>CSS：
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}备注：
位置:父div上的相对位置用于使绝对定位的子节点相对于该节点定位自己。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1359025
复制相关文章
相似问题