我是一名 HTML/CSS 初学者，想要创建四个彩色框并将它们水平对齐。我能够单独 build 这四个盒子。然而，我确实必须对 2-4 框进行评论，因为它们彼此重叠。这个社区中有人可以解决我的新手问题吗？
div 最终应该如下图所示:
这是我的代码:
body {
}
#box-grey {
background-color: grey;
height: 200px;
width: 200px;
}
#box-grey #box-orange {
background-color: orange;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
fixed: 100px;
left: 100px;
}
/*
#box-black {
background-color: black;
height: 200px;
width: 200px;
}
#box-black #box-yellow {
background-color: yellow;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
}
#box-blue {
background-color: blue;
height: 200px;
width: 200px;
}
#box-blue #box-green {
background-color: green;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
right: 0px;
}
#box-purple {
background-color: purple;
width: 200px;
height: 200px;
}
#box-purple #box-pink {
background-color: pink;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 0px;
right: 0px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey">
<div id="box-orange"</div>
</div>
<div id="box-black">
<div id="box-yellow"</div>
</div>
<div id="box-blue">
<div id="box-green"</div>
</div>
<div id="box-purple">
<div id="box-pink"</div>
</div>
</body>
</html>最佳答案
这是相当常见的解决方案，没有现代 css3 grid 和 flex 功能。我们可以为包装盒设置 display: inline-block 和 position:relative ，然后为内部盒设置 position:absolute 并定位它们到 Angular 落。
body {
min-width: 840px;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
}
.box-inner {
height: 50%;
width: 50%;
position: absolute;
}
#box-grey {
background-color: grey;
}
#box-grey #box-orange {
background-color: orange;
right: 0;
top: 0;
}
#box-black {
background-color: black;
}
#box-black #box-yellow {
background-color: yellow;
bottom: 0;
right: 0;
}
#box-blue {
background-color: blue;
}
#box-blue #box-green {
background-color: green;
bottom: 0;
left: 0;
}
#box-purple {
background-color: purple;
}
#box-purple #box-pink {
background-color: pink;
top: 0;
left: 0;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey" class="box">
<div id="box-orange" class="box-inner"></div>
</div>
<div id="box-black" class="box">
<div id="box-yellow" class="box-inner"></div>
</div>
<div id="box-blue" class="box">
<div id="box-green" class="box-inner"></div>
</div>
<div id="box-purple" class="box">
<div id="box-pink" class="box-inner"></div>
</div>
</body>
</html>关于html - CSS - 如何水平对齐我的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50174064/