【发布时间】：2018-09-18 11:12:06
【问题描述】：
我正在尝试让盒子在有空间的情况下向右浮动/堆叠。我非常接近我想要的，但是 DIV 不断被包裹，所以项目失去了它们的标题。
.box{
height: additive;
width: 222px;
margin: 8px;
background-color: #fff;
border-radius: 3px;
padding: 10px;
font-size: 14px;
box-shadow: 4px 4px #666;
word-break: keep-all;
}
body {
padding: 20px;
font-family: Helvetica;
background-color: #20262e;
-webkit-column-width: 202px;
-moz-column-width: 202px;
-column-width: 202px;
-ms-column-width: 202px;
column-width: 202px;
}<html>
<head>
</head>
<body>
<div class="box">
<h3>
eins
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
<br/>18
<br/>19
<br/>20
<br/>
</div>
<div class="box">
<h3>
zwei
</h3>1
<br/>2
<br/>3
<br/>4
<br/>
</div>
<div class="box">
<h3>
drei
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>
</div>
<div class="box">
<h3>
vier
</h3>1
<br/>2
<br/>3
<br/>4
<br/>
</div>
<div class="box">
<h3>
fünf
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
<br/>18
<br/>19
<br/>20
<br/>
</div>
<div class="box">
<h3>
sechs
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>
</div>
<div class="box">
<h3>
sieben
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>
</div>
<div class="box">
<h3>
acht
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>
</div>
<div class="box">
<h3>
neun
</h3>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
<br/>
</div>
</body>
</html>这是一个小提琴： https://jsfiddle.net/Omphaloskopie/py1hrpvs/
如您所见，盒子的包装非常难看。 我怎样才能防止这种情况发生？
编辑：
澄清我在寻找什么：我试图不使用网格，而是将盒子紧紧地包裹在内容周围。盒子根本不应该分开/包装。盒子最好靠右对齐以填满页面，但如果单个盒子太高，垂直滚动就可以了。在有足够垂直空间的地方，更多的小盒子应该在彼此的顶部对齐。页面不会有一条直线底线，底部看起来像左对齐文本翻转了 90°。
基本上它应该是这样的，例如： http://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg （这种外观是通过预先考虑框大小和绝对定位来实现的。我试图避免这种情况。必须有一个更简单的方法。）
【问题讨论】：
-
我不清楚“包装很丑”是什么意思。创建一个包含大量
br标记的列表并不是 HTML 的惯用语。你想要的行为是什么？ -
你能用弹性盒子吗？
-
不，我只是想知道你是否可以在你的项目中使用 flexbox，你想要的结果是什么？
-
我稍微调整了你的（也改变了前几个数据块以使用类似样式的 ul 和 li 元素，但不严格相关）。使用 display:inline-block 帮助：jsfiddle.net/3tu56r1y
-
@Gus 这也很好！非常感谢！这似乎是我最初的目标，但完全可以让它发挥作用:)
标签： html css word-wrap css-multicolumn-layout