<分区>
我有 5 个 div,如下所示:
<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>
我想将第一个(居中类)放在顶部中心,第二个(带有“左”文本),第三个(带有“中心”文本)和第四个(带有“右”文本)在顶部正下方中央的一行中。最后,位于 3 div 线下方的底部中心的第五个(居中类)。 我试过了,但这只是浪费时间。你能帮我做css吗?
最佳答案
像这样?
div {
height: 200px;
display: border-box;
}
.centered {
margin: 0 auto;
width: 33.33%;
}
.row {
}
.row div {
width: 33.33%;
float: left;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>
关于html - 在 html 和 CSS 中定位 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33026389/