Hi stack overflow community,我是css3/html5的初学者,我正在努力,因为我不知道如何将三个div放在一个更大的div中,如下图所示:
html - 将三个div居中放置在一个较大的中间,左右边距相同-LMLPHP

.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>

09-11 00:36
查看更多