如何忽略以不同高度创建的边距内联块?
How to ignore the margin inline blocks create with different heights?
我遇到一个问题,其中块堆叠 2,接下来的 2 个块从前 2 个块的末尾开始。如图this JSFiddle demo.
HTML:
<div class="container">
<div class="inline">
A div with less content than that one >
</div>
<div class="inline">
A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
</div>
<div class="inline">
Inline 3
</div>
<div class="inline">
Inline 4
</div>
</div>
CSS:
.container {
width:600px;
background-color:rgb(40,40,40);
}
.inline {
width:calc(50% - 22px);
display:inline-block;
vertical-align:top;
color:white;
background-color:#e74c3c;
text-align:center;
margin:5px 10px;
}
输出:
注意: 这里不占用右上div.[=47创建的白色space =]
Expected/wanted 输出:
注:这确实利用了白色space。
我知道这可以使用 2 列,但我不想使用 2 列。因为我必须能够删除一些 div,而不会在列中包含不相等的内容。
我在创建的网站上遇到了同样的问题。我用砌体来解决这个问题:
http://masonry.desandro.com/
您可以尝试使用 column-count
属性,
请注意,项目将按列降序排列。
通过向其添加第二个 class,使具有更多内容的 div 向右浮动。
HTML
<div class="inline right">
A div with more content than the one on the left. Now Inline 3 goes
down to where this div ends. I want to move it up however, so it's
right under the div that's above Inline 3.
</div>
CSS
.right {
float: right;
}
我遇到一个问题,其中块堆叠 2,接下来的 2 个块从前 2 个块的末尾开始。如图this JSFiddle demo.
HTML:
<div class="container">
<div class="inline">
A div with less content than that one >
</div>
<div class="inline">
A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
</div>
<div class="inline">
Inline 3
</div>
<div class="inline">
Inline 4
</div>
</div>
CSS:
.container {
width:600px;
background-color:rgb(40,40,40);
}
.inline {
width:calc(50% - 22px);
display:inline-block;
vertical-align:top;
color:white;
background-color:#e74c3c;
text-align:center;
margin:5px 10px;
}
输出:
注意: 这里不占用右上div.[=47创建的白色space =]
Expected/wanted 输出:
注:这确实利用了白色space。
我知道这可以使用 2 列,但我不想使用 2 列。因为我必须能够删除一些 div,而不会在列中包含不相等的内容。
我在创建的网站上遇到了同样的问题。我用砌体来解决这个问题: http://masonry.desandro.com/
您可以尝试使用 column-count
属性,
请注意,项目将按列降序排列。
通过向其添加第二个 class,使具有更多内容的 div 向右浮动。
HTML
<div class="inline right">
A div with more content than the one on the left. Now Inline 3 goes
down to where this div ends. I want to move it up however, so it's
right under the div that's above Inline 3.
</div>
CSS
.right {
float: right;
}