Gleiche Abstände innerhalb einer Box

[Foos]

Hallo,

mich würde mal interessieren, wie ihr eine solche Box umsetzen würdet:


Also die Box ist klar, aber ich meine, dass die 4 Punkte innerhalb alle den gleichen Abstand bekommen?
Danke.

 

[patrick_l]

Hi Dominik,

die vier Punkte kannst du auf unterschiedliche Weise anordnen. Entweder »oldschool« via Floating und Vergabe von Abständen (innen und außen über padding und margin) oder über Flex. Hier mal zwei Beispiele. Das Markup bleibt gleich. Lediglich unterschiedlich formatiert.

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Variante 1: Floating

.parent {
  width: 100%;
}
.parent .item {
  height: 100px;
  width: 25%;
  line-height: 100px;
  text-align: center;
  float: left;
}
.parent .item:last-child:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

Variante 2: Flexbox

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.parent .item {
  height: 100px;
  width: 50%;
  line-height: 100px;
  text-align: center;
}

Das sind jetzt nur mal zwei Beispiele. Es gibt jedoch mehr an Möglichkeiten. Es aber mal bei den beiden belasse. Vor allem das Flexbox Modell rockt und wird von mir immer häufiger genutzt.

Liebe Grüße, Patrick

 

[dn3d_fanboy]

Ich hab ich auch vor kurzem mit Flex-Boxes auseinandergesetzt und bin begeistert. Diese Variante kann ich nur empfehlen.
Besonders genial finde ich, dass man den Childelemente per CSS eine Postition geben kann. Also die erste Box ist laut CSS 1, die Zweite 2, usw. (man kann es aber auch bunt zusammen würfeln). Das ist teilweise bei mobilen Anpassungen ganz interessant. (Bsp: im Footer der der Desktopansicht hast du ein 1.) Menü mit Impressum, etc. 2.) das Copyright-Blabla und 3.) ein Menü zu den Social Media - Kanälen. Per Flexbox kannst du es dann in der mobilen Ansicht so darstellen: 1.) Impressum 2.) Social Media 3.) Copyright.

 

[noltehans]

Vielleicht sollte man noch erwähnen, dass das schöne Flexbox-Beispiel von Patrick erst ab dem IE11 funktioniert.
http://caniuse.com/#search=Flexbox

Das sollte sich aber auch bald erledigt haben, da Microsoft ab Januar 2016 nur noch den IE11 mit Patches versorgt.