我正在創建一張卡片，它有一個標題，然后在它下面有其他卡片在 2 列中。問題是我想要在元素之間而不是在它們周圍填充，至少不是在側面，因為這會使標題錯位與下面的框。這是我想要的：
我試圖給每張綠卡一個不同的填充，所以左上角有一個 0 1em 1em 0 的填充，右上角有 0 0 1em 1em 等等。如果我可以使用任何給定數量的卡片、列、行而不是“硬編碼”這樣的填充，它會更干凈。這可能嗎？
一種解決方案是填充標題，但這感覺像是一個丑陋的解決方案。
如果這樣更容易，可以存在頂部和底部填充，我只是不能將它放在左側或右側。
相關代碼：
.content-card {
width: 100%;
padding: 2em 2em 2em;
background: black;
}
.service-card {
max-width: 100%;
padding: 1em 1em 1em;
background: grey;
border-radius: 0.25em;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column-2x2 {
display: flex;
flex-direction: column;
flex-basis: 45%;
padding: 1em 1em 1em;
}<div class="content-card">
<h2 style="color:white; font-size: 36px">Services.</h2>
<br>
<div class='row'>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 1.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 2.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 3.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 4.</h3>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
網格是去這里的方式。grid-template-columns告訴瀏覽器讓 div 間隔兩個（如果你想要三列，只需指定三個寬度 - 如果你想要幾列相同的寬度，你也可以使用repeat()）。然后使用gap來改變之間的空間。
CSS 技巧有一個很好的網格入門，凱文鮑威爾也有一個很好的介紹
.title-container {
padding: 0.5rem 1.5rem;
border: 2px solid black;
color: red;
width: fit-content;
}
.container {
display: grid;
width: fit-content;
grid-template-columns: 5rem 5rem;
gap: 0.5rem;
outline: 2px solid red;
margin-block: 0.5rem;
}
.container>div {
height: 7rem;
border: 2px solid #22B14C;
}<div class='title-container'>
TITLE IS HERE
<div class='container'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>uj5u.com熱心網友回復：
我認為解決它的最簡單方法是添加這個，
justify-content: space-between;
align-content: space-between;
到您的 flex 容器（在本例中為帶有 red-card 類的 div 標簽）。請在下面嘗試這個。
.red-card{
height: 350px;
width: 250px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
border: 3px solid red
}
.green-card{
height: 150px;
width: 100px;
border: 3px solid green
}<div>TITLE IS HERE</div>
<div class="red-card">
<div class="green-card"></div>
<div class="green-card"></div>
<div class="green-card"></div>
<div class="green-card"></div>
</div>uj5u.com熱心網友回復：
用于gap間距。請注意，我已將高度和寬度降低了一半gap。
section {
display: flex;
flex-wrap: wrap;
width: 250px;
height: 500px;
border: 1px solid red;
gap: 30px;
}
section article {
width: calc(50% - 15px);
height: calc(50% - 15px);
background-color: green;
}<section>
<article></article>
<article></article>
<article></article>
<article></article>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525665.html
標籤：htmlcss弹性盒
上一篇：為IExpress使用exe檔案
下一篇：向上垂直線的CSS影片