极客观点
项目管理
HarmonyOS
问题描述
给四个li浮动，第四个li宽度不够时掉下来，此时如果li的高度为第一个>第三个>第二个，此时第四个li掉下来会在第二个li的下面，而且和第三个li持平，为什么?
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
}
ul {
height: 400px;
}
li {
width: 28%;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
/* li:not(:last-child) {
width: 28%;
} */
li:first-child {
height: 300px;
}
li:nth-child(2) {
height: 250px;
}
li:nth-child(3) {
height: 270px;
}
li:nth-child(4) {
height: 200px;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</body>
</html>你期待的结果是什么？实际看到的错误信息又是什么？
为什么会这样
这个需要去探究 css 规范中的浮动规则.
英文规则看着费劲,好在有人解读成人话,并且有一篇中文的翻译.
其中两条解读规则
对应到你的例子中的 4 号元素,它只会跟 3 号元素去对标,只会出现在 3 号元素的左边或下边,它的最上边会紧跟这 3 号的最下边,除非遇到不可抗力.对应到你的例子中的 4 号元素,它只会跟 3 号元素去对标,只会出现在 3 号元素的右边或下边.
当 3 和 4 在同一行的时候, 4 会在 3 的右边.
而当 4 被挤到下一行的时候, 4 的最上边会紧跟着 3 号的最下边,除非遇到不可抗力.
更多详情 ↓