Question

我一直在 CSS 中研究浮动属性。

这是我的HTML代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我想知道为什么我的div班级正常没有向上移动类的div？

我问了这个问题，因为如果我写了一个

<p>something</p>

在我的div课程结束后，p tag的内容向上移动，但div不会发生这种情况。我想为什么正在发生？

Answer 1

你好@Gopal Singh Rathore

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

原因是因为宽度是在div上设置的，它也有一个display：block，如果你改变了display：block to flex例如它会出现在它旁边。如果你还在p标签上设置宽度，它将与div相同。

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

Answer 2

第一个div宽25％，因此水平占据可用空间的25％第二个div也是25％宽;因此第一个div占用了第二个占用的所有空间。没有更多的空间在右边！

解决方案：使第二个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

正常 div移至顶部，正常内容不移动：请参阅普通扩展程序：

Lister先生为您提供解决方案：您需要使正常更宽，以使内容适合左侧

的右侧

.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向左浮动时不会向上移动？

3 个答案: