Zitat von
Samuell
Flexbox hilft sicher. Aber nicht pauschal für alles, so wie hier vorgeschlagen: header, footer, aside, section, ...
Natürlich nicht pauschal.
@PatrickEder Ganz konkret zu Deinem Problem.
Ich habe mir mal die unteren 9 Boxen vorgenomen, die offensichtlich außerhalb der subcolumn liegen.
Wenn Du für das übergeordnete Element ce_text eine extra Klasse vergibt z. B. ce_text_box oder irgendeine andere Klasse nach Deiner Wahl, dann benötigst Du folgenden Code damit die Boxen schön gleichmäßig verteilt werden
Code:
.ce_text_box {
float: left;
width: 33.3333%;
}
.box {
width: 170px;
height: 165px;
background-color: #d9d4d4;
border: 1px solid #a8a0a0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 4px 10px 20px grey;
margin: 0 auto 20px auto;
}
Mit float: left sorgst Du dafür, dass die den Boxen übergeordneten Elemente soweit wie möglich nach links rutschen. Mit width: 33.3333% sorgst Du dafür, dass diese Elemente jeweils ein Drittel des verfügbaren Platzes beanspruchen.
Bei den Boxen selbst sorgt margin: 0 auto 20px auto mit dem auto für den linken und rechten Außenabstand für eine mittige Platzierung innerhalb von ce_text_box.
Sollte so wie bei Deiner allerersten box ein Element nach unter herausragen (finde ich ohnehin nicht ganz glücklich), muß der untere Außenabstand ggf. größer als 20px sein.
Lesezeichen