Question

尝试制作一个看起来像这个广告牌布局的方框页面：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;    
}

Answer 1

您需要在.panel

中添加float: left

click这里是演示

Answer 2

<强> 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;
    }
}

如何使用CSS定位像海报板一样的盒子？

2 个答案: