Question

我正在尝试使用纯CSS创建此布局。我很清楚左/右。我想知道如果没有分组，这是否可行？提前感谢您的回答/帮助。

<div>
    --------------------------------------------------------
    |          | [item 1] |          | [item 4] |          |
    | [item 0] |----------| [item 3] |----------| [item 6] |
    |          | [item 2] |          | [item 5] |          |
    --------------------------------------------------------
</div>

我的代码

<div>
    <a href="#item-0" class="biggie">[item 0]</a>
    <a href="#item-1" class="small">[item 1]</a>
    <a href="#item-2" class="small">[item 2]</a>
    <a href="#item-3" class="biggie">[item 3]</a>
    <a href="#item-4" class="small">[item 4]</a>
    <a href="#item-5" class="small">[item 5]</a>
    <a href="#item-6" class="biggie">[item 6]</a>
</div>

Answer 1

如果要在父元素上设置固定高度，可以使用Flexbox执行此操作。

＆＃13;

div {
  display: flex;
  flex-wrap: wrap;
  height: 60px;
  flex-direction: column;
  align-items: center;
}
div > a {
  flex: 1;
}
div > a.biggie {
   flex: 0 0 100%;
   display: flex;
   align-items: center;
}

＆＃13;

<div>
    <a href="#item-0" class="biggie">[item 0]</a>
    <a href="#item-1" class="small">[item 1]</a>
    <a href="#item-2" class="small">[item 2]</a>
    <a href="#item-3" class="biggie">[item 3]</a>
    <a href="#item-4" class="small">[item 4]</a>
    <a href="#item-5" class="small">[item 5]</a>
    <a href="#item-6" class="biggie">[item 6]</a>
</div>

＆＃13;

Answer 2

沿flex代替float，您也可以使用nth-child(xn)来避免使用课程。

margin:auto可以帮助将它们均匀地排列并喷洒在排上。

div {
  display:flex;
  flex-flow:column wrap;
  height:3em;
}
a {
  margin:auto;
  background:gray/*see me */
}
a:nth-child(3n - 2) {
  margin:1em auto;
  background:yellow/*see me */
}

<div>
    <a href="#item-0" >[item 0]</a>
    <a href="#item-1" >[item 1]</a>
    <a href="#item-2" >[item 2]</a>
    <a href="#item-3" >[item 3]</a>
    <a href="#item-4" >[item 4]</a>
    <a href="#item-5" >[item 5]</a>
    <a href="#item-6" >[item 6]</a>
</div>
<hr/>
<div>
    <a href="#item-0" >[item 0]</a>
    <a href="#item-1" >[item 1]</a>
    <a href="#item-2" >[item 2]</a>
    <a href="#item-3" >[item 3]</a>
    <a href="#item-4" >[item 4]</a>
    <a href="#item-5" >[item 5]</a>
    <a href="#item-6" >[item 6]</a>
    <a href="#item-7" >[item 7]</a>
    <a href="#item-8" >[item 8]</a>
    <a href="#item-9" >[item 9]</a>
</div>

Answer 3

它似乎是CSS网格布局的完美用例：

＆＃13;

div {
  display: grid;
  grid-template: repeat(2, auto) / repeat(5, auto);
  grid-gap: 1px;
  grid-auto-flow: column dense;
}
div > a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
}
div > a.biggie {
   grid-row: span 2;
}

＆＃13;

<div>
    <a href="#item-0" class="biggie">[item 0]</a>
    <a href="#item-1" class="small">[item 1]</a>
    <a href="#item-2" class="small">[item 2]</a>
    <a href="#item-3" class="biggie">[item 3]</a>
    <a href="#item-4" class="small">[item 4]</a>
    <a href="#item-5" class="small">[item 5]</a>
    <a href="#item-6" class="biggie">[item 6]</a>
</div>

＆＃13;

您可以将Flexbox解决方案用作非支持网格的浏览器的后备。

如何使用CSS float来创建这个模式？

3 个答案: