Стек 3 divs на вершине 2 divs перевернутой пирамиды отзывчиво

Question

Я потерял попытку собрать 5 равных ширины divs, 3 сверху 2 divs (перевернутая пирамида, ответственно используя 2 строки).

Я могу плавать 3 divs и 2 divs на двух строках равной ширины, но равномерно разнесенная перевернутая пирамида (быстро реагирует) быстро взорвала мой минимальный мозг CSS.

Любые советы будут с благодарностью

Designers vision of the 3 divs stacked on 2 divs

Answer 1

Попробуйте display:inline-block; вместо затирки и выравнивания по центру. 2 div должны находиться в отдельном контейнере, 3 divs - в другом контейнере, один под другим. Используйте для каждого контейнера text-align:center;.

Answer 2

Нет необходимости в рядах. Вы можете сделать это с inline-block с, которые занимают 33,33% от родительской ширины и выравниванием по центру:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    text-align: center; 
 
    border: 1px solid; 
 
    padding: 1em; 
 
} 
 

 
.child { 
 
    text-align: left; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    width: 33.33%; 
 
}

<div class="parent"> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, veniam.</div><div class="child">Quisquam architecto, deleniti aperiam ipsam nisi ullam molestiae consequatur optio.</div><div class="child">Quod ad excepturi dolore sed earum impedit, nesciunt aliquid totam.</div><div class="child">Nemo repudiandae delectus deserunt molestiae temporibus modi inventore voluptates. Officiis.</div><div class="child">Quidem autem quae tempore possimus vel commodi architecto, similique tempora.</div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/3da5tpgn/

РИСКОВАННАЯ: пресловутой HTML пространство может вы должны удалить пробелы между тегами для правильной работы или использовать Flexbox:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    border: 1px solid; 
 
    padding: 1em; 
 
} 
 

 
.child { 
 
    border: 1px solid red; 
 
    padding: 1em; 
 
    width: 33.33%; 
 
}

<div class="parent"> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, nulla.</div> 
 
    <div class="child">Neque doloribus, quasi nobis sint nesciunt. Quod incidunt, vel laudantium!</div> 
 
    <div class="child">Dicta similique quasi inventore, obcaecati quia repellendus odit quam reiciendis?</div> 
 
    <div class="child">Eum esse delectus adipisci pariatur enim, quasi sed odit optio.</div> 
 
    <div class="child">Ea, amet. Ipsam sapiente harum quaerat repudiandae nobis, impedit non.</div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/4w46vva9/

Answer 3

Использование начальной загрузки:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="container text-center"> 
 
    <div class="col-xs-4">Text 1</div> 
 
    <div class="col-xs-4">Text 2</div> 
 
    <div class="col-xs-4">Text 3</div> 
 
    <div class="col-xs-3"></div> 
 
    <div class="col-xs-3">Text 4</div> 
 
    <div class="col-xs-3">Text 5</div> 
 
    <div class="col-xs-3"></div> 
 
</div>