在较大的正方形内创建四边形正方形

Question

希望这张图片可以解释我正在尝试做什么......在CSS ...

我设法完成了几乎所有这些。这是一个 Fiddle ，显示我到目前为止所得到的...不幸的是，我似乎无法并排放置方块（试过漂浮），相反，它们出现了在垂直列中。

有什么建议吗？

HTML ...

<div class="content-container">
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>    
</div>

的CSS ...

.content-container {
    max-width: 570px;
    height: auto;
    border-radius: 10px;
    border-top: 50px solid #e81354;
    background: #ffffff;
    display: block;
}

.inner-square {
    background: #cccccc;
    width: 50%;
    height: 50%;
    margin: 5px;
}

Answer 1

两个问题：

1. 您需要将float:left添加到.inner-square。
2. 你的广场没有采用你想要的表格，因为margin: 5px上有.inner-square。因此，您的.inner-square宽度目前为50％+ 50％+（4 * 5px）。因为它们大于盒子的宽度，所以第二个方块占用下一个可用空间：下面的空间。所以，试试margin: 5px 0，你的问题就会消失。

Answer 2

我发现这个代码排成一行最好我会把风格放进最终副本中的css <div class="content-container"style="position:absolute;"> <div class="inner-square"><img src="http://placehold.it/230x230"></div> <div class="inner-square"><img src="http://placehold.it/230x230"></div> <div class="inner-square"style="float:right;margin-top:-478px;"><img src="http://placehold.it/230x230"></div> <div class="inner-square"style="float:right;margin-top:-239px;"><img src="http://placehold.it/230x230"></div>
</div>

Answer 3

您的问题是您将width设置为50%但不减去10px页边距，同时您的HTML代码在div之间也有换行符，所以你应该将容器的font-size设置为0（以消除换行符的4px）：

.content-container { 
  ...
  font-size:0;
}
.inner-square {
  background: #cccccc;
  width: calc(50% - 8px);
  height: calc(50% - 8px);
  margin: 5px;    
  display:inline-block;
}
.inner-square:nth-child(even) {
  margin-left:0;
}
.inner-square:nth-child(n+2) {
  margin-top:0;
}

Demo.