我有许多宽度相同但高度不同的容器。我希望它们堆叠起来而不会在下面留太多空间。
当前，它们具有以下CSS：
.myDiv {
width: calc(100% - 67%);
float: left;
}
要实现这一目标，我还有什么想念的？
答案 0 :(得分：0)
我建议使用网格或弹性框。这是一个使用flex的好例子：https://codepen.io/cssgirl/pen/NGKgrM
这是我最喜欢的flex学习指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这是来自Codepen链接的清理版本：
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>