尝试制作一页看起来像海报板布局的盒子:http://try.time.ly/
现在，我的所有盒子都有固定的宽度和可调整的高度(取决于内容/图片的长度)。但是，我无法让它们像上面的布局一样堆叠。有什么建议么？
这是我到目前为止所拥有的:http://jsfiddle.net/SEe42/1/我希望 max-height 属性会将盒子推到右侧的下一列，但它们只是从底部开始堆叠。
html:
<!doctype html>
<body>
<div class="container">
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo ino
</div>
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque i
</div>
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam
</div>
</div>
</body>
CSS:
.container {
width: 500px;
max-height: 300px;
}
.panel {
display: block;
position: relative;
width: 100px;
margin: 10px 5px 10px 5px;
border-style: solid;
}
最佳答案
<强> Demo
使用 CSS 列属性的响应式、仅 CSS 解决方案
html
<div class="container">
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo ino</div>
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque i</div>
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam</div>
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam</div>
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam</div>
<div class="panel">>voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo ino</div>
<div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque i</div>
</div>
CSS
body {
font: 1em/1.67'Open Sans', Arial, Sans-serif;
margin: 0;
background: #e9e9e9;
}
.container {
margin: 1.5em;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.panel {
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;
}
@media only screen and (min-width: 400px) {
.container {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
.container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 900px) {
.container {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 1100px) {
.container {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
关于javascript - 如何使用 CSS 定位像海报板一样的框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25073959/