我正在处理的新网站的显示有问题。基本上，所有内容都将显示在 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>关于html - 如何使我的内联 div "neSTLe"相互融合，即使它们的大小不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40529525/