5 열 -3 고정 폭 열 & 2 유체

Question

유동적 인 레이아웃을 만들기 위해 3 개의 고정 너비 열 & 2 유체가 필요합니다. 총 5 개의 열.

Chrome에서 작동하지만 FF로 깨진 'display : table-cell;'이 있습니다.

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> 

사람은 크로스 브라우저 방식을 제안 수 없습니다. (웹킷, 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;}