个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在处理的新网站的显示有问题。基本上，所有内容都将显示在 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/
25
4
0
您好，我正在尝试让一堆不同高度的 div float 到最佳位置，以尽可能少地共同占用空间。我试过使用内联 block 并将垂直对齐设置为顶部以及将所有内容 float 到左侧。 div 是雏鸟(有点
我有一个指令，使用 d3.js 绘制一些内容以及是否绘制它取决于我范围内的数据。我的问题是我无法让它在更改后重新绘制内容，我已经尝试了 $scope.$apply 的变体，但到目前为止还没有取得任何成
在尝试解决我遇到的图形拓扑问题时，我发现自己写了一段我见过的最可怕的代码。在进入细节之前，让我先把问题说清楚:我有大量的嵌套循环/条件，我想知道是否有办法避免它。 我有以下对象供我使用: 数据集，它是
我正在处理的新网站的显示有问题。基本上，所有内容都将显示在 2 列中，当从较小的屏幕上查看时，这将减少为 1。 当我向这些框添加内容时，第二行的第一个“列”低于第一“行”的第二个元素，我希望这样我的下
我正在尝试使用以下内容返回运动队中的所有“球员及其目标”: public String printPlayers(){ for (Player player : this.pla
我有一个 tableView，每个 tableViewCell 中都有 collectionView。每个 tableViewCell 都是一种电影类型，collectionViewCells 就是电
我在处理多个嵌套的 angularjs 鼠标按钮指令时遇到了一些麻烦。我有一个如下所示的模板: Logout
我正在尝试使用 axios 将数据发布到我的 API。我需要请求并发送 XSFR token 以及请求。我正在使用 React、Redux、Thunk 和 Axios。我需要将其作为 React 组件
这个问题看似简单，其实有点复杂。这是相关的数据库结构: "people" : { "q3up6CyAe5PoEAooJwCclOGGcZd2" : { "peopleWhoLike
我是一名优秀的程序员,十分优秀！