CSS 布局 - 动态宽度 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1359025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Layout - Dynamic width DIV
提问by Todd Davis
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
我有一个非常常见的布局问题，我传统上使用表格来解决这个问题，但想要一些关于使用 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>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
这样做的好处是表格的宽度始终是浏览器（或父级）和中间列的宽度，其中内容动态调整大小以占用左/右图像之间的剩余空间。
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
我想要的是使用 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>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
这对中间 div 非常有效 - 如何设置宽度？现在我可以将它硬编码为 92% 等。但我想要的是让它自动填充空间。可以只使用 CSS 来完成吗？
回答by wow
try
尝试
<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>
or
或者
<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>
回答by Aziz
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
这会做你想做的。固定边宽为 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>
回答by AaronSieb
Or, if you know the width of the two "side" images and don't want to deal with floats:
或者，如果您知道两个“侧面”图像的宽度并且不想处理浮动：
<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:
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');
}
Notes:
笔记：
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
Position:relative 在父 div 上用于使绝对定位的子节点相对于该节点定位自己。
回答by alex
making a dynamycal width with mobile devices support
使用移动设备支持制作动态宽度
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html
