CSS布局之父容器宽高固定，包含的两个盒子间隔20px,分别距离父容器20px,两个盒子宽高相同

实现如下图所示的效果：

实现方案：使用CSS3的calc()方法计算两个盒子的宽度，代码如下

  .wp {
            position: relative;
            background-color:rgb(128, 165, 131);
            width: 300px;
            height: 300px;
        }
        .box1,.box2 { 
            float: left;
            width:  calc((100% - 60px) / 2);
            height: 100%;
            background-color: rgb(170, 86, 125);
        }
        .box1 {
            margin-left: 20px;
        }
        .box2 {
            margin: 0 20px;
        }