如何防止 columned-DIVs 换行？
How to prevent columned-DIVs from wrapping?
我正在尝试让 float/stack 自己位于右侧的框，只要有空间即可。我已经非常接近我想要的了，但是 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>
这是一个fiddle：
https://jsfiddle.net/Omphaloskopie/py1hrpvs/
正如你所看到的，盒子包装得很丑。
我怎样才能防止这种情况发生？
编辑：
为了阐明我在寻找什么：我试图没有网格，而是紧紧包裹在内容周围的框。盒子根本不应该分开/包裹。盒子最好靠右对齐以填满页面，但如果单个盒子太高，垂直滚动也可以。在有足够的垂直 space 的情况下，更多较小的框应该彼此对齐。该页面不会有直线底线，底部看起来像 left-aligned 文本翻转 90°。
基本上它应该是这样的，例如：
http://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg
（这种外观是通过预谋box-sizes和绝对定位来实现的。我正在努力避免这种情况。有是一种更简单的方法。）
我不确定你想要的结果是什么，但从它的声音来看，你可以这样做...
.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>
这里有一个fiddlehttps://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;
}
你的列表的性质有不同的高度。如果您使用 column 并填充所有 spaces，它会自动剪切底部列表，因为它必须填充所有空白 spaces。
即使您保持每个列表的高度不变，它也会在底部留下空白 space，因为最后一个列表将移至顶部。
所以简而言之，如果你的身高不一样，你就不能填满所有空白 space。
最接近的方法是对所有列表使用相同的高度，使用 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>
我正在尝试让 float/stack 自己位于右侧的框，只要有空间即可。我已经非常接近我想要的了，但是 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>
这是一个fiddle： https://jsfiddle.net/Omphaloskopie/py1hrpvs/
正如你所看到的，盒子包装得很丑。 我怎样才能防止这种情况发生？
编辑：
为了阐明我在寻找什么：我试图没有网格，而是紧紧包裹在内容周围的框。盒子根本不应该分开/包裹。盒子最好靠右对齐以填满页面，但如果单个盒子太高，垂直滚动也可以。在有足够的垂直 space 的情况下，更多较小的框应该彼此对齐。该页面不会有直线底线，底部看起来像 left-aligned 文本翻转 90°。
基本上它应该是这样的，例如： http://www.ballajack.com/wp-content/uploads/2012/01/bookolio-e1327663255869.jpg （这种外观是通过预谋box-sizes和绝对定位来实现的。我正在努力避免这种情况。有是一种更简单的方法。）
我不确定你想要的结果是什么，但从它的声音来看，你可以这样做...
.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>
这里有一个fiddlehttps://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;
}
你的列表的性质有不同的高度。如果您使用 column 并填充所有 spaces，它会自动剪切底部列表，因为它必须填充所有空白 spaces。
即使您保持每个列表的高度不变，它也会在底部留下空白 space，因为最后一个列表将移至顶部。
所以简而言之，如果你的身高不一样，你就不能填满所有空白 space。
最接近的方法是对所有列表使用相同的高度，使用 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>