CSS：将div水平设置为2行答案

【问题标题】：CSS: Set divs horizontally in 2 rowsCSS：将div水平设置为2行
【发布时间】：2021-05-20 23:57:01
【问题描述】：

假设我有

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

我想要的是将 .single div 像砖一样从左到右水平放置在 2 行中，这种简单的方式：第一个 div 将位于左上角，第二个将放置在第一个下方，第三个将放置在下一个到第 1、第 4 将被放置在第 3 之下，依此类推：

1 3 5 7 9
2 4 6 8

所有 div 的大小都相同。

我已经尝试过使用 masonry.js，它的工作方式就像一个魅力，但它为如此简单的任务提供了复杂的解决方案（简单的解决方案很重要）。

fiddle playground

【问题讨论】：

标签： javascript jquery css jquery-isotope

【解决方案1】：

有一个 CSS 属性可以做到这一点

http://tinker.io/8ff59

.cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

http://caniuse.com/#feat=multicolumn

【讨论】：

它适用于 IE 10.. 将容器 div 的宽度设置为 400 像素等。

【解决方案2】：

我认为你不能像你一样使用具有结构的 css 来做到这一点。

这种结构应该可以帮助您获得所需的布局：

<div class="a">
   <div class="b">
       <div class="c">1</div>
       <div class="c">2</div>
   </div>
   <div class="b">
       <div class="c">3</div>
       <div class="c">4</div>
   </div>
</div>


<style>
div.a div.b {float: left; width: 100px;}
</style>

【讨论】：

它可能会起作用，但它会改变 DOM 的结构，并且在进行排序等时可能会变得很棘手。我正在考虑一些第 n 个 css 元素，但我不确定它是否可能跨度>
你只需要两行还是更多？
让我们说 2，我不确定 100%，但我们可以假设。

【解决方案3】：

为了争论，假设你不能改变你的文档结构——你需要单独通过布局定义来做到这一点。

如果您知道您将拥有多少个项目，最简单的管理方法是使用带有 inline-block 元素的 CSS3 列。您的 .singles 是内联块，并且 .cont 使用 'columns' 属性设置 5 列，每列足够宽以容纳您的单品，同时使用 max-height 将内联块强制到每两个项目的新列上。单线体的最小尺寸足以阻止多个内联块显示在同一行。

您可以在此处将此效果视为 jsfiddle：http://jsfiddle.net/mwjJG/25/：

.container {
    height: 240px;

    columns: 100px 5;
    -webkit-columns: 100px 5;
    -moz-columns: 100px 5;
    }

.single {
    display: inline-block;
    height: 100px;
    width: 100px;
    }

请注意，这在 IE

【讨论】：

【解决方案4】：

我在这里使用以下代码通过 CSS 完成了这项工作：不过这有点骇人听闻。

我将三个 div（最后三个）设置为“double”类

.cont .single {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    float:left;
    display: inline-block;
}
.cont .double {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    display:inline-block;
    float:left;
}

div:nth-child(5) {
    clear:left;
}

.cont {
    height: 220px;
    background: red;
}

【讨论】：

【解决方案5】：

我遇到了同样的问题并使用网格解决了。

这是您应该添加到容器中的 CSS：

.cont {
    height: 220px;
    background: red;
    display: grid;
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 100px;
}

【讨论】：