这种布局怎么实现？

Question

三块A区域宽度相等始终占1/3，10px无论怎么放大缩小都是10px，应该怎么实现？

Answer 1

flex是个不错的选择, 也可以试试calc:

<div class="container">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="child center"></div>
</div>

.container {
  height: 300px;
  border: 1px solid red;
  width: 920px;
  margin: 20px;
}

.left {
  float: left;
  margin-right: 10px;
  width: calc((100% - 20px) / 3);
}
.right {
  float: right;
  margin-left: 10px;
  width: calc((100% - 20px) / 3);
}

.center {
  overflow: hidden;
}

.child {
  box-shadow: border-box;
  height: 100%;
  border: 1px solid green;
}

Answer 2

试试flex布局：codepen

不支持flex布局可以使用百分比, 但相对会麻烦一点。

Answer 3

flex的实现方式如下

<style>
     .box{
         border: 1px solid red;
         width: 500px;
         height: 300px;
         display: flex;
         justify-content: space-around;
     }
     .a{
        flex: 1;
         height: 300px;
         background-color: yellow
     }
     .a+.a{
         margin-left:10px; 
     }
    </style>
    
    <div class="box">
        <div class="a">1</div>
        <div class="a">2</div>
        <div class="a">3</div>
    </div>