我正在尝试创建一个三列布局,如下所示:
http://www.manisheriar.com/holygrail/index.htm
它应该是固定宽度 – 流体宽度 – 固定宽度布局。
解决方法
尝试这样:
http://jsfiddle.net/andresilich/6vPqA/2/
CSS
.container-fluid > .sidebar { position: relative; top: 0; left:auto; width: 220px; /* width of sidebar */ } .left { float:left; } .right { float:right; } .container-fluid > .content { margin: 0 240px; /* width of sidebars + 10px of margin */ }
HTML
<div class="sidebar left"> <div class="well"> <h5>Sidebar</h5> ..... </div> </div> <div class="sidebar right"> <div class="well"> <h5>Sidebar</h5> ..... </div> </div>
每个评论,我更新了我的答案,以携带在右侧和左侧边栏之间切换一个类的可能性。
现在,您可以在< div class =“content”>中使用以下内容。 DIV:
CSS
.fixed-fluid { margin-left: 240px; } .fluid-fixed { margin-right: 240px; margin-left:auto !important; } .fixed-fixed { margin: 0 240px; }
演示:http://jsfiddle.net/andresilich/6vPqA/3/show/
编辑:http://jsfiddle.net/andresilich/6vPqA/3/