3

可以说我有

<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 将位于左上角，第二个将放置在第一个下方，第三个将放置在第一个旁边， 4th 将放置在 3rd 之下，依此类推：

1 3 5 7 9
2 4 6 8

所有的 div 都具有相同的大小。

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

小提琴游乐场

4

5 回答 5

2

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

http://tinker.io/8ff59

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

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

于 2013-05-11T16:54:51.403 回答
0

我在此处使用以下代码通过 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;
}
于 2013-05-11T17:08:44.217 回答
0

我不认为你可以像你一样使用具有结构的 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>
于 2013-05-11T16:24:44.157 回答
0

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

如果您知道您将拥有多少个项目，那么最简单的管理方法是使用带有 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<10 上不起作用，除非您可以使用某种基于 JS 的 shiv 来添加对 columns 属性的支持（CSS Pie 可能能够做到这一点）。

于 2013-05-11T17:05:54.227 回答
0

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

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

.cont {
    height: 220px;
    background: red;
    display: grid;
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 100px;
}
于 2021-05-20T15:51:08.843 回答