为什么div元素上面的div元素向左浮动时它不向上移动？

Question

我一直在研究 CSS 中的 float 属性。

这是我的html代码：

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 25%;
}

<div class="left">
  <img src="Icon.png">
  <h1>hi my name is left</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
  <img src="Icon.png">
  <h1>hi my name is normal</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>

我想知道为什么我的 div with class normal 没有向上移动 div of class left?

我问这个问题是因为如果我写一个

<p>something</p>

在我 class 的 div 离开 p tag 的内容后 向上移动 但这不会发生在 div.. 我想知道为什么会发生这种情况？

Answer 1

嗨@Gopal Singh Rathore

我相信我已经正确理解了你的问题。

这是因为宽度设置在 div 上，它也有一个 display:block，例如，如果您将 display:block 更改为 flex，它就会出现在旁边它。如果您还在 p 标签上设置宽度，它将与 div.

相同

我希望这能回答你的问题。

Answer 2

第一个 div 的宽度为 25%，因此它在水平方向上占据了可用空间 space 的 25%。
第二个 div 也是 25% 宽；因此第一个 div 占用了第二个 space 占用的所有空间。右边根本就没有空间了！

解决方案：使第二个 div 宽度不是 25%，而是 50%（比第一个多 25%）。

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 50%;
}

<div class="left">
  <img src="Icon.png">
  <h1>hi my name is left</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
  <img src="Icon.png">
  <h1>hi my name is normal</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>

Answer 3

normal div 移动到顶部，正常内容不：参见 normal 扩展名：

李斯特先生给了你解决办法：你需要把normal加宽一些，这样内容才能放在left[的右边。 =12=]

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 27%;
  background-color: lightblue;
  border: solid 1px blue;
}

<div class="left">
  <img src="Icon.png">
  <h1>hi my name is left</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
  <img src="Icon.png">
  <h1>hi my name is normal</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>

为什么div元素上面的div元素向左浮动时它不向上移动？

Why div element do not move upwards when the div above it is floated left?

html

css

css-float

web