0

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+)

ありがとうカム

4

1 に答える 1

2

こんにちは、すべての主要なブラウザーで機能するように見えるソリューションを思いつきました。

jsフィドル

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;}
于 2013-01-25T11:58:40.923 に答える