html - 5 列 - 3 个固定宽度的列和 2 个流体

Question

我正在寻找创建一个流体布局，具有 3 个固定宽度的列和 2 个流体。一共5列。

我玩过“display: table-cell;”，它在 Chrome 中工作，但在 FF 中坏了。

section.how-to .steps { max-width:1400px; width:100%; padding:10px 3%; box-sizing: border-box; height:350px}
section.how-to .steps > div {  display: table-cell;}
section.how-to .steps .step {  min-width:262px} 
section.how-to .steps .filler {  height:200px; width:50%}



  <section class='how-to'> 
       <div class="steps">
           <div class="step one"></div>
           <div class="svg  filler"></div>
           <div class="step two"></div>
           <div class="svg  filler"></div>
           <div class="step three"></div>
       </div> 
 </section>

任何人都可以建议一种跨浏览器的方法。(Webkit, FF, IE8+)

谢谢凸轮

Answer 1

嗨，我想出了一个似乎适用于所有主要浏览器的解决方案：

jsFiddle

html

<div class="container">
    <div id="LeftColumn" class="fixedWidth">
        col 1
    </div>
    <div id="CenterColumn">
        <div id="CenterLeft" class="centerColumn">
            <div class="padded">
                <div class="content">
                    col 2
                </div>
                <div class="fixedWidth">
                    col 3
                </div>
                 <div class="clearSpacer">&nbsp;</div>
            </div>
        </div>
        <div id="CenterRight" class="centerColumn">
            <div class="padded">
                <div class="content">col 4</div>
            </div>
        </div>
        <div class="clearSpacer">&nbsp;</div>
    </div>
    <div id="RightColumn" class="fixedWidth">
        col 5
    </div>
    <div class="clearSpacer">&nbsp;</div>
</div>

CSS

.container {padding:0 62px;} /*I have used 62px - just change to 262px (all 62s below too);*/
.fixedWidth {width:62px; height:200px; background-color:red;} /*height and bg-color just to show what's happening*/

#LeftColumn {float:left; margin-left:-62px;}
#RightColumn {float:right; margin-right:-62px;}
#CenterColumn {float:left; width:100%;}

.centerColumn {width:50%; float:left; background-color:blue; position:relative;} 
#CenterLeft {z-index:2;}
#CenterRight {z-index:1;}
#CenterLeft .padded {padding-right:31px;} /*padding should be half width of fixed column*/
#CenterLeft .content {float:left;}
#CenterLeft .fixedWidth {float:right; margin-right:-62px;}
#CenterRight .padded {padding-left:31px;} /*padding should be half width of fixed column*/
.content {width:100%;}

.clearSpacer {clear:both; height:0; overflow:hidden;}