我有一个非常常见的布局问题,我传统上是使用表来解决的,但我想要一些关于如何使用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就能做到吗?
发布于 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>
发布于 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>
发布于 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上的相对位置用于使绝对定位的子节点相对于该节点定位自己。
https://stackoverflow.com/questions/1359025
复制相似问题