Auf Thema antworten 2026

Beitrag

<blockquote data-quote="patrick_l" data-source="post: 2564069" data-attributes="member: 194379">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]&lt;div class=&quot;parent&quot;&gt;&nbsp; &lt;div class=&quot;item&quot;&gt;1&lt;/div&gt;&nbsp; &lt;div class=&quot;item&quot;&gt;2&lt;/div&gt;&nbsp; &lt;div class=&quot;item&quot;&gt;3&lt;/div&gt;&nbsp; &lt;div class=&quot;item&quot;&gt;4&lt;/div&gt;&lt;/div&gt;[/html]Variante 1: Floating[code=CSS].parent {&nbsp; width: 100%;}.parent .item {&nbsp; height: 100px;&nbsp; width: 25%;&nbsp; line-height: 100px;&nbsp; text-align: center;&nbsp; float: left;}.parent .item:last-child:after {&nbsp; content: &quot;.&quot;;&nbsp; clear: both;&nbsp; display: block;&nbsp; visibility: hidden;&nbsp; height: 0px;}[/code]Variante 2: Flexbox[code=CSS].parent {&nbsp; display: -webkit-box;&nbsp; display: -webkit-flex;&nbsp; display: -ms-flexbox;&nbsp; display: flex;}.parent .item {&nbsp; height: 100px;&nbsp; width: 50%;&nbsp; line-height: 100px;&nbsp; text-align: center;}[/code]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. <img src="/styles/default/xenforo/smilies/biggrin.gif"&nbsp; class="smilie" loading="lazy" alt=":D" title="Big Grin&nbsp; &nbsp; :D" data-shortname=":D" />Liebe Grüße, Patrick</blockquote>

[QUOTE="patrick_l, post: 2564069, member: 194379"] 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>[/html] [B]Variante 1: Floating[/B] [code=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; }[/code] [B]Variante 2: Flexbox[/B] [code=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; }[/code] 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 [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?