响应方块填充 100% 行答案

【问题标题】：responsive square to fill 100% row响应方块填充 100% 行
【发布时间】：2015-08-19 19:57:19
【问题描述】：

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

每个方块都设置为其父容器的 25% 宽度。正方形（方框）的容器 div 没问题，但内部 div（正方形内容 div）display: table 没有得到小数点到他的宽度。所以如果盒子是 100.5px 宽度，他的容器将是 100px。所以对于 4 个正方形，我少了 2px。

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

【问题讨论】：

你的代码在哪里？

标签： html css

【解决方案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>

【讨论】：