Hi stack overflow community,我是css3/html5的初学者,我正在努力,因为我不知道如何将三个div放在一个更大的div中,如下图所示:
.wrapper{
height: 100%;
width: 100%;
background-color: blue;
padding: 20px;
text-align: center;
}
.wrapper:after{
content:"";
display: block;
clear: both;
margin: 0 auto;
}
.sez{
width: 340px;
height: 240px;
float: left;
}
.sez1{
background-color:green;
}
.sez2{
background-color:red;
}
.sez3{
background-color:pink;
}
<div class="wrapper">
<div class="sez sez1"></div>
<div class="sez sez2"></div>
<div class="sez sez3"></div>
</div>
这是完整的HTML代码:
pastebin.com/GT0a6ztG网站
这是完整的CSS代码:
pastebin.com/7dYuz3cC网站
最佳答案
有不同的方法。这是其中之一。
其他人的答案都是很好的解决方案,但在你的情况下却不起作用。
您需要删除此CSS:
.wrapper:after{
content:""; display: block; clear: both; margin: 0 auto;
}
演示
.wrapper {
height: 100%;
width: 100%;
background-color: blue;
padding: 20px;
text-align: center;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.sez {
width: 30%;
height: 240px;
}
.sez1 {
background-color: green;
}
.sez2 {
background-color: red;
}
.sez3 {
background-color: pink;
}
<div class="wrapper">
<div class="sez sez1"></div>
<div class="sez sez2"></div>
<div class="sez sez3"></div>
</div>