Question

我正在使用float属性练习，我目前有一个像这样的HTML：

＆＃13;

section {
  display: inline-block;
  float: left;
  width: 300px;
  height: 100px;
  border: solid;
  margin: 3px;
}

＆＃13;

<section style="margin-left: 150px;"> </section>
<section style="height: 300px;"></section>
<section></section>
<section> </section>
<section style="height: 300px; width: 3px; background-color: blue;"></section>

＆＃13;

我不明白的是，最后一个部分（蓝色框）并没有一直向上，而是＃34;固定＆＃34;有点失望。是什么原因，我该如何解决这个问题？（没有链接小提琴，因为在小提琴中显示太小，所以它的行为不同。）

Answer 1

我猜它因屏幕大小而烦恼。在我的电脑上进行测试，当浏览器全屏显示时，所有这些都保持在最顶层。当我将浏览器大小更改为半屏时，蓝色部分会关闭。尝试使用百分比来宽度。

Answer 2

可能是使用最后一个非蓝色框突破到新行，然后蓝色框开始在同一级别。如果你想堆叠盒子，那么你需要使用一些额外的div。

左浮动元素不会向上移动

2 个答案: