網格中塊的寬度計算

我正在嘗試設置網格塊，但即使看起來好像我正在使塊填滿容器寬度的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>

來源

2017-07-27 sankorati

這看起來複雜，是一場噩夢維護。你能提供一個想要的結果嗎？還可以考慮使用CSS Grid還是Flexbox進行佈局？ – sol

你的問題是div s表示讓您的塊之間的空白。所以你的箱子是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><!-- 
 
\t --><div class="block" style="background-color: #d0c7dd"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div><!-- 
 
\t --><div class="block" style="background-color: #0c8eec"></div><!-- 
 
\t --><div class="block" style="background-color: #2be6d9"></div><!-- 
 
\t --><div class="block" style="background-color: #d0c7dd"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div><!-- 
 
\t --><div class="block" style="background-color: #0c8eec"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div> 
 
    </div> 
 
</div>

來源

2017-07-27 10:03:16

謝謝你讓我意識到空白。結束添加字體大小：0;到.grid元素。 – sankorati

這也適用;） –

網格中塊的寬度計算

回答

相關問題