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