响应方块填充100％行

Question

我有4个响应方块，我创建like this。

每个方块设置为其父容器的25％宽度。 square（square-box）的容器div是可以的，但是display: table的内部div（square-content div）没有得到小数点到他的宽度。所以如果盒子的宽度是100.5px，那么他的容器将是100px。所以对于4个方格我的2px更少。

您可以在图片中看到右侧的空白区域。

Answer 1

我可以假设'空'空间是父元素的边距。

这是你在找什么？

body, 
.square-box, 
.square-content,
.square-content div,
.square-content span {
    margin: 0 ;
}

.square-box {
    position: relative;
    overflow: hidden;
    background: #4679BD;
    width:100%;
}
.square-box:before {
    content:"";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    width:100%;
}
.square-content div {
    display: table;
    width: 100%;
    height: 100%;
    font-size:40px;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.square-content span:nth-of-type(1) {
   background:red;
}
.square-content span:nth-of-type(3) {
   background:yellow;
    color:black;
}

<div class='square-box'>
    <div class='square-content'>
        <div>
            <span>Box 1</span>
            <span>Box 2</span>
            <span>Box 3</span>
            <span>Box 4</span>
        </div>
    </div>
</div>