ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

HTML Objekte (Div's) mit CSS gleichmässig verteilen

Divs_verteilen

Für das gleichmässige Verteilen von HTML Objekten / Elemente (sogennete Div's) gibt es mit CSS3 verschiedene Variianten.

Objekte verteilen mit Zwischenraum

Mit dieser Variante werden die Elemente gleichmässigverteilt anhand der Angabe des Zischenraums.
Es gibt somit bei den äusseren Elementen keinen Abstand nach aussen.


HTML Code
<div class="ganze_flaeche">
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
</div>

CSS Code
.ganze_flaeche{
  background-color:#CCC;
  width:690px;
  height:100px;
  display:flex;
  justify-content:space-between; /* Verteilung */}

.zu_verteileindes_div{
  background-color:#ff0000;
  width:10%;
  float:left;
margin: 10px; /* Rand */}


Hinweis
Hinweis die Verteilung der Objekte (Div's) funktinoniert sowohl mit relativen Angeben (%), wie auch mit absoluten Anbagen (px).


Objekte verteilen mit Raum rundherum

Mit dieser Variante werden die Elemente gleichmässigverteilt anhand der Angabe des Abstandes rund um das Elemente herum.
Es gibt somit bei den äusseren Elementen einen einfachen Abstand und bei den inneren Elementen einen doppelten Abstand, da hier der Zwischenraum von 2 Elementen zusammentrifft


HTML Code
<div class="ganze_flaeche">
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
  <div class="zu_verteileindes_div"></div>
</div>

CSS Code
.ganze_flaeche{
  background-color:#CCC;
  width:690px;
  height:100px;
  display:flex;
  justify-content:space-around; /* Verteilung */}

.zu_verteileindes_div{
  background-color:#ff0000;
  width:10%;
  float:left;
margin: 10px; /* Rand */}


Hinweis
Hinweis die Verteilung der Objekte (Div's) funktinoniert sowohl mit relativen Angeben (%), wie auch mit absoluten Anbagen (px).



Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Feedback
feedback
Anzeige
Spenden
ROG Innovation unterstützen