水平ディビジョンの横並びの整列と積み重ね

私は4つのdivを持つようにしています。最初の2つは幅25％、高さ50％で、もう1つは上にあります。他のdivは幅25％、高さ100％、幅50％、高さ100％です。私は彼らがお互いに突き当たるので、それらを並べてどのように並べるかを理解できません。水平ディビジョンの横並びの整列と積み重ね

div { 
 
    background: green; 
 
    border: 1px solid white; 
 
} 
 

 
.box3{ 
 
    display: inline-block; 
 
    width: 50%; 
 
    height:360px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
} 
 

 
.box2{ 
 
    display: inline-block; 
 
    width: 25%; 
 
    height:360px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
} 
 

 
.box{ 
 
    width: 25%; 
 
    height:180px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box2"></div> 
 
<div class="box3"></div>

ここで私が欲しいものを示すイメージです。

これは非常に扱いにくいですし、div内に要素を配置すると、ページの周りに浮かんで実際のdivに固執しないので、私は全く別のソリューションやフレームワークこれも同様に簡単です。

出典

2017-02-01 DudeDudeDude

は、スタイルディスプレイとメインのDIVを作成しますブロックすると、このMAIN DIVの内部にこのボックスが置かれます浮動小数点数：左、ディスプレイを使う代わりにそれを試してください：それぞれのインラインブロック –

フレキシボックスは、そのようなことは非常に簡単です： Codepen：inline-： http://codepen.io/SergiOca/pen/zNWrKP

HTML

<body> 
    <div class="full-wrap"> 
<div class="first-wrap"> 
<div class="box"></div> 

<div class="box"></div> 
</div> 

<div class="box2"></div> 

<div class="box3"></div> 
    </div> 
</body>

CSS

.full-wrap{ 
    display: flex; 
} 
.first-wrap{ 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
} 


.box3{ 
    flex: 2; 
    height:360px; 
    border: 1px solid black; 
} 

.box2{ 
    flex: 1; 
    height:360px; 
    border: 1px solid black; 
} 


.box{ 
    height:180px; 
    border: 1px solid black; 
}

出典

2017-02-01 16:44:32 Sergi

これはうまくいきます。 – DudeDudeDude

フレックスボックスを少し調べてみてください私はhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Sergi

をお勧めしますこれは少し古く、別の質問のために構成されているかもしれませんが、あなたはこのモバイル応答性？スクリーンがデスクトップではなく、十分な幅ではない場合、ボックスは、上記のように強制的に並べて表示するのではなく、上下に表示されます。 – DudeDudeDude

水平ディビジョンの横並びの整列と積み重ね

答えて

関連する問題