Html div anordnen?

4 Antworten

TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
28.05.2021, 11:08

dann musst du einfach drum rum jeweils DIVS machen , also 3 Spalten und da jeweils 2 rein .

enteweder mit float die 3 spalten oder mit display:inline-block oder mit flex

benno3123 
Beitragsersteller
 28.05.2021, 11:09

Also so eine art Grid Layout? Und diese dann befüllen?

TechPech1984  28.05.2021, 11:10
@benno3123

nicht zu kompliziert im schema

so wie man divs eben nebeneinander macht .

erst 3 divs nebeneinander , dann in jedes 2 divs hinein
Von einem Experten bestätigt
DodgeRT
28.05.2021, 11:10

spontan würde ich guggen ob ich da mit display:flex was hinbekomme.

ansonsten musst 3 div-container außen rum machen, quasi als spalten und diese dann mit display:flex oder float ausrichten.
TechPech1984  28.05.2021, 11:12

geht nur mit was drum rum :) sonst funktioniert der Zeilenfloat ja nicht ;) Zeile bleibt Zeile :9 der größte beschreibt die höhe der zeile :)

DodgeRT  28.05.2021, 11:14
@TechPech1984

warum? du kannst auch ein grid machen. problem is dann halt dass die container iwie von der größe abhängig voneinander sind sonst wirds n bissl n gebastel.

TechPech1984  04.06.2021, 10:46
@DodgeRT

dann hast du das konzept browser nciht verstanden . Im prinzip schreibmaschine , alles was in der Zeile ergibt die höhe der Zeile . Auch blöcke werden in zeilen oder abolsut dargestellt .

deswegen hat man auch den automatischen umbruch .
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
28.05.2021, 11:27
Wie kann man das vermeiden?

mit der Display-Eigenschaft:

<!doctype html>
<title>display inline-grid</title>
<style>
* { box-sizing:border-box}

div.spalte {
   width:33%;
   display:inline-grid
}

article {
   border:1px solid silver;
   padding:1em;
   margin:1px 0
}
</style>
<div class="spalte">
  <article>hello world</article>
  <article>hello world<br>hello world</article>
  <article>hello world</article>
</div>
<div class="spalte">
  <article>hello world<br> hello world<br> hello world</article>
  <article>hello world</article>
</div>
<div class="spalte">
  <article>hello world<br> hello world</article>
  <article>hello world<br> hello world<br>hello world</article>
</div>

Alex
hi1its1me
28.05.2021, 11:18

Bild zum Beitrag

Lege doch einfach 3 DIVs nebeneinander. Damit die Container wie gewollt nebeneinander liegen. Und befülle diese DIVs dann jeweils mit den DIVs, die untereinander erscheinen sollen.
- (Computer, HTML, CSS)