只要有空间，我都在尝试使盒子漂浮或堆积在右边。我非常接近我想要的东西，但是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 （这种外观是通过预先确定框的大小和绝对位置来实现的。我正试图避免这种情况。有是一种更简单的方法。）
答案 0 :(得分：1)
我不确定您想要的结果是什么，但是从听起来来看，您可以做到...
.box{
height: auto;
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;
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px;
}<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/py1hrpvs/71/
或...
在没有flexbox的情况下不指定最大高度的一种方法
.box{
height: auto;
width: 222px;
margin: 8px;
background-color: #fff;
border-radius: 3px;
padding: 10px;
font-size: 14px;
box-shadow: 4px 4px #666;
word-break: keep-all;
display: inline-block;
}
body {
padding: 20px;
font-family: Helvetica;
background-color: #20262e;
column-count: 4;
column-gap: 1em;
}
答案 1 :(得分：1)
列表的性质具有不同的高度。如果您使用column并填满所有空格，它将自动切入底部列表，因为它必须填满所有空白。
即使您保持每个列表的高度不变，它也会在底部保留一个空格，因为最后一个列表将排在顶部。
因此，简而言之，如果您没有相同的高度，则无法填充所有空白。
最接近的方法是对所有列表使用相同的高度，或者使用column或float
.box{
/*height: additive;*/
width: 202px;
margin: 8px;
background-color: #fff;
border-radius: 3px;
padding: 10px;
font-size: 14px;
box-shadow: 4px 4px #666;
word-break: keep-all;
min-height:400px;
max-height:400px;
float: left;
}
body {
padding: 20px;
font-family: Helvetica;
background-color: #20262e;
width:100%;
/*
-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>