将一个较大的三个div放在一个中间，左边和右边有相同的边距

Question

你好堆栈溢出社区，我是css3 / html5的初学者，我很挣扎，因为我不知道如何将三个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

Answer 1

有不同的方式。这是其中之一。

其他人的答案都是很好的解决方案，但它们并不适用于您的情况。

您需要删除这条CSS：

.wrapper:after{
   content:""; display: block; clear: both; margin: 0 auto;
}

<强>演示

＆＃13;

＆＃13;

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

＆＃13;

<div class="wrapper">
  <div class="sez sez1"></div>
  <div class="sez sez2"></div>
  <div class="sez sez3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Flexbox

＆＃13;

＆＃13;

.wrapper {
  border: 1px solid black;
  justify-content: space-around;
  display: flex;
  padding: 10px;
}

.box {
  height: 100px;
  background: red;
  width: 100px;
}

＆＃13;

<div class="wrapper">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用Flexbox轻松实现这一目标。

.wrapper {
    display: flex;
    justify-content: space-around;
}

规则justify-content: space-around;会将子元素均匀地分布在父元素.wrapper中，并在它们之间和周围应用相等的间距。

根据您的浏览器支持需求，您可能需要添加前缀或不同的语法。

检查CSS-Tricks guide to Flexbox以获得出色的指导。

Answer 4

另一种解决方案，跨浏览器。 Parent Margin: Auto宽Fixed Width

#sez {
  width: 1020px;
  margin: auto;
}

JSFiddle

Answer 5

您可以使用setTransferMode(QFtp::TransferMode); ：

来实现这一目标

:last-of-type

.wrapper {
  background-color: #ff0;
  margin: 0 auto;
}

.column {
  background-color: #000;
  float: left;
  margin-right: 2%;
  width: 32%;
}

.column:last-of-type {
  margin-right: 0;
}

p {
  color: #fff;
}