【发布时间】：2019-03-16 16:59:00
【问题描述】：
问题：
有没有办法让布局像在没有JS的情况下从左到右砌体？
！请注意，我不需要完全砌体，它的工作方式有点不同！
必填：
- 从左到右的顺序；
- 每个项目都进入下一列（如果较高位置的可用空间，砌体中的项目可以乱序挑选列）；
- 高度不固定；
- 我无法更改原始顺序（1,2,3... 但不是 1,4,7...）。
示例：
这个解决方案几乎是我要找的，但是顺序被破坏了 - example
HTML：
<div class="masonry">
<div class="item">1. (should be #1) ...</div>
<div class="item">2. (should be #4) ...</div>
<div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>
<div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
<div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>
<div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
</div>
CSS：
body {
font: 1em/1.67 'Open Sans', Arial, Sans-serif;
margin: 0;
background: #e9e9e9;
}
.wrapper {
width: 95%;
margin: 3em auto;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
text-align:left;
font-size: .85em;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
【问题讨论】：
-
关闭了几个重复链接，但要创建适当的动态砌体布局，您很可能需要使用脚本。
-
这个链接的答案没有必需的参数。我不需要脚本，我不需要完全砌体布局。
-
您的代码示例，它使用 CSS 列，不能“从左到右”不重新排序项目，并且您要求的是 砌体像布局一样，链接的答案很好地描述了这一点，因此是重复的。请注意，您不能将 Flexbox 和 CSS Columns 结合起来以获得重新排序选项和列流。
-
我知道这个例子不能从左到右，我不需要列流。有我的评论：“这个解决方案几乎是我正在寻找的，但是顺序被破坏了 - 示例”。我正在寻找一种解决方案来获得描述的结果。砌体和柱布局不是预期的结果。两者都没有预期的行为。柱子顺序错误，砌体柱子定位错误。只有 2 个可能的答案：1. 对于这样的要求，这是不可能的，2. 一些聪明的正确解决方案。
标签： css layout flexbox grid frontend