Question

让我们说我有四个<p>并且所有<p>个元素都浮动到左侧，但第二个<p>的高度比其他元素长。图片如下：

我不明白的是，为什么p4不在p1之下？为什么它在p3之下？你可能会说p2因为它的高度而在路上，但是为什么p4必须从当前位置移动到p1下的位置，可以直接将p4放在p1下面并且没有任何关系p2的高度？

Answer 1

浮动元素向左（或向右）移动，直到它接触到其包含框或其他浮动元素的边缘。

由于第二个是方式，它会停在那里。

样本1 - 浮动

div {
  width: 25%;
  margin: 5px;
  float: left;
  border: 1px solid;
  height: 30px;
}
div:nth-child(1) {
  height: 50px;
}
div:nth-child(2) {
  height: 40px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

样本2 - 浮动

div {
  width: 25%;
  margin: 5px;
  float: left;
  border: 1px solid;
  height: 30px;
}
div:nth-child(1) {
  height: 50px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

样本3 - 浮动

div {
  width: 25%;
  margin: 5px;
  float: left;
  border: 1px solid;
  height: 30px;
}
div:nth-child(3) {
  height: 50px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

根据评论更新

为了进行比较，以下是内联块在类似设置中的行为方式。

示例 - 内联块

div {
  width: 25%;
  margin: 5px;
  display: inline-block;
  border: 1px solid;
  height: 30px;
}
div:nth-child(2) {
  height: 50px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Answer 2

由于您使用float: left;，因此您必须使用垂直空间来保持其优先权，以保持左侧对象的正确位置（实际上，对象位于该垂直位置时最左侧）线）。

Answer 3

您可以使用以下代码而不是float

div{
  display:flex;
  align-items:flex-start;
  flex-direction:row;
  flex-wrap:wrap
 }

Answer 4

使用此代码

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

ul:after {
  clear: both;
}

ul li {
  width: 33%;
  padding: 0px;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
}

<html>

<head>

</head>

<body>

  <ul>

    <li><p>Content 1</p></li>

    <li><p>Content 2</p></li>

    <li><p>Content 3</p></li>

    <li><p>Content 4</p></li>

  </ul>
</body>



</html>

在html中并排浮动多个元素

4 个答案: