在2 div divs倒數金字塔頂部堆積3 divs

Question

我迷路了，試圖堆疊5個相等寬度的divs，3在2 divs（倒金字塔，響應地使用2行）之上。

我可以在兩行上浮動3個div和2個div，它們的寬度都相等，但均勻間隔的倒金字塔（響應式）很快爆炸了我最小的CSS大腦。

任何提示，將不勝感激

Designers vision of the 3 divs stacked on 2 divs

Answer 1

嘗試display:inline-block;代替浮動和對準到中心。 2個div應該在一個單獨的容器中，3個div在另一個容器中，一個在另一個容器中。每個容器使用text-align:center;。

Answer 2

不需要行。

* { 
 
    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空間可以你可以用inline-block s表示佔據父寬度的33.33％，並居中對齊做導致問題，您必須刪除標籤之間的空格才能正常工作，或者使用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>