个人中心
文章发布
退出
作者热门文章
- 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
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
当我尝试在 db2 中创建表时，它抛出以下错误 $ db2 CREATE TABLE employee(emp_id INT NOT NULL, emp_name VARCHAR(100)) sh:
我有: while (i < l) { if (one === two) { continue; } i++; } 但是 JSLint 说: Problem at line 1 chara
所以我有这个代码: char inputs[10] = ""; int numInputs = 0; while (numInputs < 10){ char c; printf("E
var ninja = { name: 'Ninja', say: function () { return 'I am a ' + this.name; }
我收到一个我不明白的错误，请注意，我是编码新手，所以这可能是一个简单的错误。 #include using namespace std; int main() { //Initialise Fahr
我正在使用 javascript 和 react，由于某种原因，我收到了一个奇怪的 token 错误。 这是发生错误的代码: renderNavBar() { if (!this.us
Closed. This question is off-topic。它当前不接受答案。
由于某种我无法解释的原因，编译器正在输出一个错误，指出它发现了一个意外的#else 标记。 这发生在文件的开头: #if defined( _USING_MFC ) #include "stda
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
这个问题在这里已经有了答案: Difference between sh and Bash (11 个答案) 关闭 2 年前。 我正在编写一个简单的 bash 脚本，我在 XX `(' unexpe
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 此问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic
我在 Windows 7 上编写了一个脚本，它不断给我一个错误“(此时出乎意料。”对于以下代码 if %vardns%=="NODNS" ( netsh interface ipv4 set ad
我正在尝试使用xmlstarlet（使用xpath）解析XML文件，但是出现语法错误，并且我不知道如何更正我的代码。 这是我的脚本： #!/bin/bash if [ $1=="author" ];
以下脚本旨在在目录中的所有文件上运行程序“senna”，并将每个文件的输出(保留输入文件名)写入另一个目录 for file in ./Data/in/*; do ./senna -iobta
我从 challengers.coffee 运行此代码，并收到错误 ActionView::Template::Error (SyntaxError: [stdin]:3:31:unexpected
我在 config.db.database; 行中有语法错误(意外的标记“.”)。这是我在文件中的代码 const config = require('../config/config') const
这一定很明显，但是我无法使它正常工作。我正在尝试传输应该用于构建$ classKey的对象，这反过来又导致删除所需的软件(amd64或i386)。好吧，这里的代码: $name = @("softwa
我正在使用 1.3.7 版学习 Grails，但我一直无缘无故地遇到以下语法错误: unexpected token: mapping @ line x, column y. 有一次，我通过运行“gr
我正在尝试找出这段Pascal代码的问题 function Factorial(n: integer): integer; begin if n = 0 then Result := 1
我是一名优秀的程序员,十分优秀！