我需要3列布局,第一列和第3列是可变的,因为会有图像或一些可变长度的文本(或另一个图像),但我需要中间用背景图像填充剩余空间,如果它会像我一样工作想象一下
HTML:
<div class="left-vp"> <img src="~/Content/images/vp1.png" /> </div> <div class="mid-vp"> </div> <div class="right-vp"> <p> //some text here or another img </p> </div>
CSS
.left-vp { float: left; } .mid-vp { height: 2px; background: #FFFFFF url("images/dot.png") repeat-x; width: 100%; } .right-vp { float: right; }
CSS可以这样吗?
解决方法
如果您可以控制标记,并且不介意进行更改,则可以使用表块样式来完成此操作.这是我知道哪种方式可以处理所有场景和调整大小的唯一方法.
HTML
<div class="container"> <div> <div class="col col1"> <div class="Nowrap">Column 1</div> </div> <div class="col col2 fill center"> <div class="Nowrap">Column 2</div> </div> <div class="col col3"> <div class="Nowrap">Column 3</div> </div> </div> </div>
CSS
.container { width: 100%; } .container { display: table; } .container > div { display: table-row; } .container > div > div { display: table-cell; } .container > div > div { padding: .5em; } .container .Nowrap { white-space: Nowrap; } .container .fill { width: 100%; } .container .center { text-align: center; } .col1 { background: red; } .col2 { background: blue; } .col3 { background: green; }
在行动:http://jsfiddle.net/Vxc3n/1/
要记住以下几点:
>如果第一列和第三列包含文本,则需要将它们包装在具有空白区域的DIV中:无包装CSS样式>如果您有超过1个填充列,请确保宽度总计= 100%(例如,2列,使用50%)>您将无法将列缩小到超出所需的最小宽度