个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个页面布局，它在一个可变宽度的容器内使用具有恒定宽度和可变高度的 float 框(为了这个问题，我将其设置为常量)。这是我页面的代码:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
当我应用此代码时，div 4 似乎“卡”在 Angular 落里，而不是像它应该的那样在 div 3 的左侧:(Codepen preview) .
我做错了什么，我应该如何解决这个问题？
最佳答案
您可以清除奇数 div:
.profile:nth-child(odd) {
clear:left;
}
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}<body>
<div id="main">
<div class="profile">1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>关于html - CSS float 框意外的 Angular 凸起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33460169/
26
4
0
我有一个页面布局，它在一个可变宽度的容器内使用具有恒定宽度和可变高度的 float 框(为了这个问题，我将其设置为常量)。这是我页面的代码: CSS: #main { width: 640px
我是一名优秀的程序员,十分优秀！