CSS布局 - 动态宽度DIV

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> 

关于这样做的好处是，表格的宽度是始终浏览器（或母）的宽度，中间一栏，其中的内容是动态的尺寸占用左/右图像之间的剩余空间

我想是重新创建使用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> 

这个伟大的工程接受中间格，我要如何设置宽度？现在我可以将它硬编码为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

作出dynamycal宽度与移动设备支持

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