CSSレイアウト - の3つの列、2つのボックス

Question

を含む中央の列で私の現在のレイアウトは次のようになります。https://gyazo.com/5ed712dcea7d207b511220e3c73185da

私は同じDIVにA、BおよびCを入れて、それらに同じクラス名を与え、次にやりましたこれで.cssファイル：

.classname{ 
    display: inline-block; 
    width: 32%; 
    vertical-align: top; 
} 

しかし、レイアウトは次のようになりますので、私はBの下にDを追加したい： https://gyazo.com/4e8cb4cfd3f4011d359bc1e25b717ff1

はそれを行うための方法はありますか？

ありがとうございます！

Answer 1

私はちょうどdiv Bを包み込み、別のdivとdivを一緒にしておくようにします。これは、このようなレイアウトをどのように処理するのかを示すための方法です。より良い方法は、CSSのflexプロパティを使用することです。フレックスをよく知っている他の人は、フレックスの使用に役立つかもしれません。

* { 
 
\t box-sizing: border-box; 
 
} 
 
.classname { 
 
\t display: inline-block; \t 
 
\t vertical-align: top; 
 
\t border: 1px solid red; 
 
} 
 
.layout { 
 
\t height: 100px; 
 
\t float: left;width: 31%; 
 
\t margin: 5px; 
 
}

<div class="classname layout">a</div> 
 
<div class="layout"> 
 
\t <div class="classname" style="width: 100%;height: 70px;">b</div> 
 
\t <div class="classname" style="width: 100%;height: 20px;margin-top: 10px;">d</div> 
 
</div> 
 
<div class="classname layout">c</div>

Answer 2

フレキシボックスには、この問題を解決することができます。あなたができる方法の1つは、このようにすることです。以下のコードを見てください。しかし、このようなことをしたくなければ、石積みのレイアウトを見たいかもしれません。

.container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.elem-left, .elem-right { 
 
    width: 200px; 
 
    border: 1px solid #000; 
 
} 
 
.elem-left{ 
 
    border-right: 0; 
 
} 
 
.elem-right{ 
 
    border-left: 0; 
 
} 
 
.elem { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
} 
 
.flex-column { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 
.flex-column>.elem:first-of-type{ 
 
    border-bottom: 0; 
 
} 
 
.elem p { 
 
    margin: 0; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="elem-left"></div> 
 
    <div class="flex-column"> 
 
    <section class="elem"> 
 
     <p> 
 
     Flexbox is so easy! 
 
     </p> 
 
    </section> 
 
    <section class="elem"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget. 
 
     </p> 
 
    </section> 
 
    </div> 
 
    <div class="elem-right"></div> 
 
</div>