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>

关于这一点的好处是，表的宽度始终是浏览器（或父级）的宽度，以及内容动态调整大小的中间列，以占用左/右图像之间的剩余空间。 / p>

我想要的是使用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>

Answer 2

这将做你想要的。固定边长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>

Answer 3

或者，如果你知道两个“侧面”图像的宽度，并且不想处理花车：

<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上的相对用于使绝对定位的子项相对于该节点定位。

Answer 4

通过移动设备支持制作动态宽度

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html

CSS布局 - 动态宽度DIV

4 个答案: