Question

此代码有两个问题： 1.第四个div似乎被压扁了。其height小于其他div。 2.容器div的高度未更改为50％。我使用了wv，但不知道为什么％不起作用。

.container {
	background: blue;
	width: 75%;
	height: 50vw;
}


.box {
	width: 20%;
	background: #333;
	color: white;
	font-size: 25px;
	font-family: 'helvetica';
	border: 1px solid blue;
	margin: 2px;
	float: left;
	text-align: center;
}

#box4 {
	width: 20%;
	background: #333;
	color: white;
	font-size: 25px;
	font-family: 'helvetica';
	border: 1px solid blue;
	margin-top: 2px;
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>prac</title>
</head>
<body>
  <div class="container">
    <div id="one" class="box">
      <p>One</p>
    </div>
    <div id="two" class="box">
      <p>Two</p>
    </div>
    <div id="three" class="box">
      <p>Three</p>
    </div>
    <div id="box4">
      <p>four</p>
    </div>
  </div>
</body>
</html>

Answer 1

您的第四个元素被压缩是因为您将float的前三个元素left，但不要“重置” float。这可以通过clearfix来实现：

#box4:before {
  content: "";
  display: table;
  clear: both;
}

.container {
  background: blue;
  width: 75%;
  height: 50vw;
}

.box {
  width: 20%;
  background: #333;
  color: white;
  font-size: 25px;
  font-family: 'helvetica';
  border: 1px solid blue;
  margin: 2px;
  float: left;
  text-align: center;
}

#box4:before {
  content: "";
  display: table;
  clear: both;
}

#box4 {
  width: 20%;
  background: #333;
  color: white;
  font-size: 25px;
  font-family: 'helvetica';
  border: 1px solid blue;
  margin-top: 2px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>prac</title>
</head>

<body>
  <div class="container">
    <div id="one" class="box">
      <p>One</p>
    </div>
    <div id="two" class="box">
      <p>Two</p>
    </div>
    <div id="three" class="box">
      <p>Three</p>
    </div>
    <div id="box4">
      <p>four</p>
    </div>
  </div>
</body>

</html>

关于为什么不能在%上使用.container的原因，是因为基于百分比的单位从其直接父级（并向上链接）继承其值，而<body>具有未定义固定的height。您需要在父级上计算出height，以便孩子能够以百分比的形式计算出自己的height。

为什么在CSS上应用浮点数时，div元素会被压缩？

1 个答案: