Question

这可能看起来很愚蠢，但我无法弄清楚如何使用CSS来做到这一点。

我想对齐左侧的所有内部div，以及它从顶部重新启动时。

因此，在cyan div（包含）中的以下示例中，div应显示在从顶部开始的第二列上。

这可以实现吗？

＆＃13;

#container {
  height: 300px;
  width: 300px;
  background-color: lightgray;
}
.element {
  height: 60px;
  width: 60px;
  margin: 2px;
}

＆＃13;

<div id="container">
  <div class="element" style="background-color: red;"></div>
  <div class="element" style="background-color: orange;"></div>
  <div class="element" style="background-color: yellow;"></div>
  <div class="element" style="background-color: pink;"></div>
  <div class="element" style="background-color: cyan;"></div>
  <div class="element" style="background-color: blue;"></div>
  <div class="element" style="background-color: green;"></div>
  <div class="element" style="background-color: lightgreen;"></div>
</div>

＆＃13;

Answer 1

是的，使用flexbox

＆＃13;

#container {
    height: 300px;
    width: 300px;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    align-content:flex-start;
}
.element {
    height: 60px;
    width: 60px;
    margin: 2px;
}

＆＃13;

<div id="container">
    <div class="element" style="background-color: red;"></div>
    <div class="element" style="background-color: orange;"></div>
    <div class="element" style="background-color: yellow;"></div>
    <div class="element" style="background-color: pink;"></div>
    <div class="element" style="background-color: cyan;"></div>
    <div class="element" style="background-color: blue;"></div>
    <div class="element" style="background-color: green;"></div>
    <div class="element" style="background-color: lightgreen;"></div>
</div>

＆＃13;

Answer 2

最明显但又无聊的答案是使用弹性箱。

但是，您也可以使用花式几何体来做朋克：让它们向右浮动并将所有内容旋转90度。

当然，要正确定位内容，您需要将它们旋转到相反的方向。

#container {
  height: 300px;
  width: 300px;
  background-color: lightgray;
  transform: rotate(-90deg);
}
.element {
  height: 60px;
  width: 60px;
  margin: 2px;
  float: right;
  position: relative;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.5em;
  transform: rotate(90deg);
}

<div id="container">
  <div class="element" style="background-color: red;"><div class="text">Hello,</div></div>
  <div class="element" style="background-color: orange;"><div class="text">is</div></div>
  <div class="element" style="background-color: yellow;"><div class="text">it</div></div>
  <div class="element" style="background-color: pink;"><div class="text">me</div></div>
  <div class="element" style="background-color: cyan;"><div class="text">you</div></div>
  <div class="element" style="background-color: blue;"><div class="text">are</div></div>
  <div class="element" style="background-color: green;"><div class="text">looking</div></div>
  <div class="element" style="background-color: lightgreen;"><div class="text">for?</div></div>
</div>

如何在div父级中首先对齐div而不是顶部？

2 个答案: