Antworten auf deine Fragen:
Neues Thema erstellen

Gleiche Abstände innerhalb einer Box

Foos

Member

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

Hat es drauf

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.

HTML:
<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
CSS:
.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
CSS:
.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. :D

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

dn3d_fanboy

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.612
Beiträge
1.538.343
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben