网格中

Question

我试图设置一个块网格，但即使看起来我正在使块填满容器宽度的100％。他们似乎没有正确对齐。

第一行应该有一个大块和三个小块。第二个应该由第一个大块的剩余部分填补，一个小块和一个大块。

似乎块的总宽度大于容器宽度，迫使它在第二行上移动并弄乱了布局。

我错过了其中一个元素的某些属性吗？

＆＃13;

＆＃13;

.content {
  width: 100%;
  margin-top: -5px;
  margin-right: -5px;
  position: relative;
  height: 100%;
}

.grid {
  width: 100%;
}

.block {
  position: relative;
  display: inline-block;
  margin: 5px;
  width: calc(20% - 10px);
  padding-bottom: calc(20% - 10px);
  vertical-align: top;
}

.block:nth-child(14),
.block:nth-child(18),
.block:nth-child(19),
.block:nth-child(20),
.block:nth-child(5),
.block:nth-child(6),
.block:nth-child(7),
.block:nth-child(8),
.block:nth-child(9) {
  margin-top: calc(-20% + 5px)
}

.block:nth-child(1),
.block:nth-child(11),
.block:nth-child(20),
.block:nth-child(6) {
  width: calc(40% - 10px);
  padding-bottom: calc(40% - 10px)
}

.block:nth-child(5) {
  margin-left: calc(40% + 5px)
}

.block:nth-child(10) {
  margin-left: calc(-60% + 5px)
}

.block:nth-child(15) {
  margin-left: calc(-20% + 5px)
}

＆＃13;

<div class="content">
  <div class="grid">
    <div class="block" style="background-color: #2be6d9"></div>
    <div class="block" style="background-color: #d0c7dd"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #68d2e7"></div>
    <div class="block" style="background-color: #001fc9"></div>
    <div class="block" style="background-color: #d040e9"></div>
    <div class="block" style="background-color: #fd1341"></div>
    <div class="block" style="background-color: #0c8eec"></div>
    <div class="block" style="background-color: #2be6d9"></div>
    <div class="block" style="background-color: #d0c7dd"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #68d2e7"></div>
    <div class="block" style="background-color: #001fc9"></div>
    <div class="block" style="background-color: #d040e9"></div>
    <div class="block" style="background-color: #fd1341"></div>
    <div class="block" style="background-color: #0c8eec"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #f06859"></div>
    <div class="block" style="background-color: #68d2e7"></div>
    <div class="block" style="background-color: #001fc9"></div>
    <div class="block" style="background-color: #d040e9"></div>
    <div class="block" style="background-color: #fd1341"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的问题是构成你的块的div之间的空白。所以盒子是100％，加上＆＃34; ＆＃34;盒子之间。

快速简便的解决方案是删除div s。

之间的新行/空格

或者，在空白处添加注释（见下文）。

＆＃13;

＆＃13;

.content {
  width: 100%;
  margin-top: -5px;
  margin-right: -5px;
  position: relative;
  height: 100%;
}

.grid {
  width: 100%;
}

.block {
  position: relative;
  display: inline-block;
  margin: 5px;
  width: calc(20% - 10px);
  padding-bottom: calc(20% - 10px);
  vertical-align: top;
}

.block:nth-child(14),
.block:nth-child(18),
.block:nth-child(19),
.block:nth-child(20),
.block:nth-child(5),
.block:nth-child(6),
.block:nth-child(7),
.block:nth-child(8),
.block:nth-child(9) {
  margin-top: calc(-20% + 5px)
}

.block:nth-child(1),
.block:nth-child(11),
.block:nth-child(20),
.block:nth-child(6) {
  width: calc(40% - 10px);
  padding-bottom: calc(40% - 10px)
}

.block:nth-child(5) {
  margin-left: calc(40% + 5px)
}

.block:nth-child(10) {
  margin-left: calc(-60% + 5px)
}

.block:nth-child(15) {
  margin-left: calc(-20% + 5px)
}

＆＃13;

<div class="content">
  <div class="grid">
    <div class="block" style="background-color: #2be6d9"></div><!--
	--><div class="block" style="background-color: #d0c7dd"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #68d2e7"></div><!--
	--><div class="block" style="background-color: #001fc9"></div><!--
	--><div class="block" style="background-color: #d040e9"></div><!--
	--><div class="block" style="background-color: #fd1341"></div><!--
	--><div class="block" style="background-color: #0c8eec"></div><!--
	--><div class="block" style="background-color: #2be6d9"></div><!--
	--><div class="block" style="background-color: #d0c7dd"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #68d2e7"></div><!--
	--><div class="block" style="background-color: #001fc9"></div><!--
	--><div class="block" style="background-color: #d040e9"></div><!--
	--><div class="block" style="background-color: #fd1341"></div><!--
	--><div class="block" style="background-color: #0c8eec"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #f06859"></div><!--
	--><div class="block" style="background-color: #68d2e7"></div><!--
	--><div class="block" style="background-color: #001fc9"></div><!--
	--><div class="block" style="background-color: #d040e9"></div><!--
	--><div class="block" style="background-color: #fd1341"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;