Heim > Fragen und Antworten > Hauptteil
Ich erstelle eine Karte mit einem Titel und darunter befinden sich weitere Karten in zwei Spalten. Das Problem ist, dass ich einen Abstand zwischen den Elementen möchte, nicht um sie herum, zumindest nicht an den Seiten, da dies dazu führen würde, dass der Titel nicht mit dem Feld unten übereinstimmt. Das ist es, was ich will:
Ich habe versucht, jeder grünen Karte eine andere Polsterung zu geben, also wäre die obere linke Polsterung 0 1em 1em 0, die obere rechte Polsterung wäre 0 0 1em 1em und so weiter. Es wäre sauberer, wenn ich eine allgemeine Lösung hätte, die eine beliebige Anzahl von Karten, Spalten und Zeilen enthalten könnte, anstatt eine „hartcodierte“ Auffüllung wie diese. Ist es möglich?
Eine Lösung besteht darin, die Kopfzeile aufzufüllen, aber das scheint eine hässliche Lösung zu sein.
Polsterung oben und unten kann vorhanden sein, ich kann sie nur nicht links oder rechts anbringen, wenn das einfacher wäre.
Zugehöriger Code:
.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>
P粉1655228862024-03-30 11:08:27
我认为解决这个问题最简单的方法就是添加这个,
justify-content: space-between; align-content: space-between;
到你的Flex容器(在本例中是带有红卡类的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
}
TITLE IS HERE
P粉2783794952024-03-30 11:05:30
网格是解决这个问题的方法。 grid-template-columns
告诉浏览器将 div 间隔两行(如果您想要三列,只需指定三个宽度 - 如果您想让多列具有相同的宽度,您也可以使用 repeat()
)。然后使用 ngap
更改之间的空格。
CSS技巧对网格有很好的入门知识,< a href="https://www.youtube.com/watch?v=rg7Fvvl3taU" rel="nofollow noreferrer">Kevin Powell 对此也有很好的介绍
.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; }
TITLE IS HERE