我想按照下图绘制4个div。
但是我得到了这个。
下面是我的html。包装 div 的位置设置为相对位置，包含的 div 位置设置为绝对位置。但是，它们都堆叠在一起。谢谢。
#container{
position: relative;
}
.blocks{
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
}
#1{
position: absolute;
margin: auto auto;
}
#2{
position: absolute;
float: left;
}
#3{
position: absolute;
float: right;
}
#4{
position: absolute;
margin: auto auto;
bottom: 20px;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div class="blocks" id="1">1</div>
<div class="blocks" id="2">2</div>
<div class="blocks" id="3">3</div>
<div class="blocks" id="4">4</div>
</div>
</body>
</html>最佳答案
1) ID 不允许以数字开头，因此您根本不会读取 1、2、3 等。
2) 你在 .blocks 类中拼错了高度
3) 你并不真的需要绝对定位来使用 float ，所以你可能需要它的唯一元素#4，我只是用边距给这个 div 空间并让它出现在其他 div 的下面。
我建议您尝试以下操作:
#container {
position: relative;
}
.blocks {
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
}
#a1 {
margin: 0 auto;
}
#a2 {
float: left;
}
#a3 {
float: right;
}
#a4 {
margin: 200px auto 0;
}<div id="container">
<div class="blocks" id="a1">1</div>
<div class="blocks" id="a2">2</div>
<div class="blocks" id="a3">3</div>
<div class="blocks" id="a4">4</div>
</div>关于html - CSS div布局定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41346779/