5列 - 3个固定宽度的列＆amp; 2液

Question

我正在寻找一个流畅的布局，有3个固定宽度的列和＆amp; 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 +）

谢谢Cam

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;}