我对新网站的展示有意见。基本上，所有内容都将显示在2列中，当从较小的屏幕查看时，这将减少到1列。
当我将内容添加到这些框中时，第二行的第一个“列”低于第一个“行”的第二个元素，我希望它能使下一行从它正上方的元素（而不是上次分析的元素）保持其边距。
下面是我的问题的一个例子：
body{
background-color:lightgray;
}
.box{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:48%;
margin:1%;
padding:10px;
background-color:white;
display:inline-block;
float:left;
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="box">
<h1>Box 1</h1>
Test content 1
</div>
<div class="box">
<h1>Box 2</h1>
its a bit longer<br/>
than the last one<br/>
<br/>
its a lot longer<br/>
than the last one actually<br/>
</div>
<div class="box">
<h1>Box 3</h1>
its cold and lonely down here :(<br/>
I want to be with my waifu Box 1<br/>
</div>
</body>
</html>我想让它看起来是这样的：
我怎样才能改变样式来匹配这个？有可能吗？
最佳答案
您可以使用:nth-child()选择器选择所有2n元素并向右浮动。
* {
box-sizing: border-box;
}
body {
background-color: lightgray;
}
.box {
width: 48%;
margin: 1%;
padding: 10px;
background-color: white;
float: left;
}
.box:nth-child(2n) {
float: right;
}<div class="box">
<h1>Box 1</h1> Test content 1</div>
<div class="box">
<h1>Box 2</h1> its a bit longer
<br/>than the last one<br/>
<br/>its a lot longer
<br/>than the last one actually<br/>
</div>
<div class="box">
<h1>Box 3</h1> its cold and lonely down here :(
<br/>I want to be with my waifu Box 1<br/>
</div>
<div class="box">
<h1>Box 4</h1> its cold and lonely down here :(
<br/>I want to be with my waifu Box 1<br/>
</div>