Как сделать этот макет по дисплею: ​​table

Question

Только что начал изучать CSS и случилось, чтобы обсудить некоторые вопросы о display:table для веб-макета. Я сделал simple pen, в котором двухстрочный макет создается встроенным блоком и плавает соответственно. Я сомневаюсь, что для этого можно использовать 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 вы могли бы попробовать ответы, предложенные в ниже С.О. вопрос: table cell width issue

Answer 2

можно использовать display: flex, теперь самое лучшее решение.