Question

我迷失了尝试堆叠5个相等宽度的div，3个在2个div之上（倒金字塔，相应地使用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

不需要行。您可以使用inline-block s来占用父宽度的33.33％并与中心对齐：

＆＃13;

* {
  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%;
}

＆＃13;

<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>

＆＃13;

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

警告：臭名昭着的HTML空间可能会导致问题，您必须删除标记之间的空格才能使其正常工作，或者使用Flexbox：

＆＃13;

* {
  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%;
}

＆＃13;

<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>

＆＃13;

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

Answer 3

使用bootstrap：

＆＃13;

<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>

＆＃13;

堆栈3 divs在2 divs倒置金字塔顶部响应

3 个答案: