[ERLEDIGT] Html Box nebeneinander einbauen

[Isabella88]

Hallo,

Ich stehe gerade an.Ich möchte meine fabigen Boxen nebeneinander haben,nur erscheinen diese immer untereinander.Ich habe folgenden Html Code:

<div style="background-color:lightgrey;
            width:300px;
            height:100px;
            border:3px lightgrey;
">
INHALT
</div>
<div style="background-color:lightgrey;
            width:300px;
            height:100px;
            border:3px lightgrey;
">
INHALT
</div>
<div style="background-color:lightgrey;
            width:300px;
            height:100px;
            border:3px lightgrey;
">
INHALT
</div>

Hoffe ihr könnt mir helfen.

 

[SpiceLab]

Ich stehe gerade an.Ich möchte meine fabigen Boxen nebeneinander haben,nur erscheinen diese immer untereinander.

Das ist ein typisches Merkmal von Block-Elementen (engl. block-level-elements), zu denen <div> gehört, im Textfluß einen Zeilenumbruch zu erzwingen.

Es gibt aber mehrere Möglichkeiten, um ihr Verhalten, das auf display:block beruht, zu korrigieren, und sie nebeneinander anzuordnen:

1. CSS-Eigenschaft display:inline-block (display:inline ginge auch, lässt aber kein width/height zu)
2. CSS-Eigenschaft float:left (wird heutzutage aber aus Gründen des Responsive Webdesign mittels 3. geregelt)
3. Flexbox-Modell

Ein paar Links, um Flexbox näher kennenzulernen:

• https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Größenangaben/Flexbox
  
• http://de.learnlayout.com/flexbox.html
• http://www.w3schools.com/css/css3_flexbox.asp
• ...

Moderation: Thema wird von HTML nach CSS verschoben