17

我有一个非常常见的布局问题，我传统上使用表格来解决，但想要一些关于使用 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 完成吗？

4

4 回答 4

22

尝试

<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-31T20:54:22.813 回答
9

这将做你想要的。固定边宽度为 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-31T19:45:17.337 回答
5

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

<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');
}

笔记：

Position:relative 在父 div 上用于使绝对定位的子节点相对于该节点定位自己。

于 2009-08-31T19:45:35.777 回答
0

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

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

于 2014-01-23T11:42:16.337 回答