ディスプレイでこのレイアウトを作成する方法：テーブル

Question

ちょうどCSSを学ぶようになり、ウェブレイアウトのためのdisplay:tableについての議論を見た。私はsimple penを作りました。ここでは、2行レイアウトがそれぞれinline-blockとfloatで作成されています。これを行うにはdisplay:tableを使用することはできますか？このようなレイアウトのために

.container{ 
 
     width:500px; 
 
     height:200px; 
 
     border:1px solid green; 
 
     margin:10px; 
 
    } 
 

 
    .a, .b { 
 
     display:inline-block; 
 
     background:grey; 
 
     border:1px solid red; 
 
     box-sizing:border-box; 
 
     vertical-align:top; 
 
    } 
 

 
    .a { 
 
     width:30%; 
 
     height:50%; 
 
    } 
 

 
    .b { 
 
     width:70%; 
 
     height:50%; 
 
    }

<div class="container"> 
 
     <div class="a">a</div> 
 
     <div class="b">b</div> 
 
     <div class="b">b</div> 
 
     <div class="a">a</div> 
 
</div>

Answer 1

それはあなたの細胞は、列ごとにサイズが変化するようdisplay: table避けるのがベストです。

これらのレイアウトでは、display: flexを使用することをお勧めします。非常に汎用性があり、inline-blockとfloatよりも柔軟性が高くなります。 これは、旧式のブラウザと互換性がない可能性があります。compatibility list here

ここにはget started with flexboxの素晴らしい場所があります。

p.s.あなたが本当にdisplay: tableで通過したい場合には、SOの問題の下で提案されている解答を試みることができる： table cell width issue

Answer 2

display: flexを使用することができ、それは今最善の解決策です。