我正在尝试建立一个块状网格,但是即使我似乎正在使这些块状填充容器宽度的100%。他们似乎没有正确排队。
第一行应该有一个大块,三个较小的块。第二个应该由第一个大块的其余部分(一个小块和一个大块)填充。
似乎块的总宽度大于容器宽度,迫使其继续在第二行上并弄乱了布局。
我是否缺少其中一个元素的某些属性?
.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)
}
<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>
最佳答案
您的问题是构成块的div
之间的空白。因此您的包装盒是100%,在包装盒之间加上“”。
快速简便的解决方案是删除div
之间的新行/空格。
或者,在空白处添加注释(请参见下文)。
.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)
}
<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>
关于css - 网格中块的宽度计算,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45347139/