Positionierung divs in einem Container

Question

Ich habe eine allgemeine, möglicherweise Anfänger Frage zu HTML.

#container { 
 
    height: 200px; 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 
#item1 { 
 
    height: 100px; 
 
    max-width: 200px; 
 
    border: 1px solid red; 
 
} 
 
#item2 { 
 
    height: 100px; 
 
    max-width: 200px; 
 
    border: 1px solid blue; 
 
}

<div id="container"> 
 
    <div id="item1"></div> 
 
    <div id="item2"></div> 
 
</div>

Meine Frage ist, warum #item1 und #item2 divs untereinander geht im Gegensatz nebeneinander zu? Stimmt es nicht, dass es sich nicht mehr um Elemente auf Blockebene handelt, weil ich für sie eine festgelegte Breite angegeben habe? Warum sind sie innerhalb von #container nicht nebeneinander aufgereiht? Die #container hat mehr als genug Breite, um beide Elemente unterzubringen.

Hinweis: Dies ist ausschließlich für das Lernen/Neugier. Ich weiß, dass ich Ränder und Positionierung verwenden kann, um sie dort zu platzieren, wo ich möchte. Ich bin aber nur neugierig, warum es sich so verhält.

Danke.

Answer 1

Div-Elemente sind Blockelemente, es sei denn, Sie legen die Anzeigeeigenschaft auf Inline oder Inline-Block fest, die nicht wie andere Inline-Elemente rechts ausgerichtet ist.

hinzufügen display: inline-block zu den css divs geben ihnen was sie wollen.

Answer 2

<div> Tag immer mit neuer Zeile beginnen, wenn Sie keine Frameworks wie Bootstrap oder andere verwenden. Wenn Sie mehrere Elemente in einer Zeile sehen möchten, fügen Sie css wie display: inline-block

Answer 3

hinzu. Bitte ersetzen Sie Ihre Klasse wie folgt.

#item1{ 
    height:100px; 
    max-width:200px; 
    border:1px solid red; 
    display:inline-block; 
} 
#item2{ 
    height:100px; 
    max-width:200px; 
    border:1px solid blue; 
    display:inline-block; 
} 

Answer 4

Der #container dh du Div hat eine Anzeigeeigenschaft von Block. Dies ist eine Standardeigenschaft, wenn Sie sie nicht auf etwas anderes setzen. In Ihrem Fall übernimmt das div diese Standardanzeigeeigenschaft.

Um # item1 und # item2 nebeneinander anzuzeigen, verwenden Sie einfach display: inline-block in Ihrem #container.

Answer 5

just add float:left; property in child divs or display:inline-block;https://jsfiddle.net/8tvn0kw6/5/

Answer 6

div ist der Standard-Block-Element. Ein Block-Level-Element beginnt auf einer neuen Linie und streckt sich so weit wie möglich nach links und rechts. Andere gängige Elemente auf Blockebene sind p und form, und in HTML5 gibt es neue Header, Fußzeilen, Abschnitte und mehr.

Auch wenn Sie Breite angeben, lassen andere Elemente nicht direkt daneben zu. Dies ist die Eigenschaft eines Blockebenenelements.

Verwenden Sie die CSS inline-block es wird die angegebene Breite oder Breite des Inhalts belegen.

https://developer.mozilla.org/en-US/docs/CSS/display

Answer 7

Die height des Behälters sollte die Summe der Höhen des Kindes divs und die Höhen der Grenzen der Kinder

dh sein., height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px

#container { 
height: 204px; 
} 

Answer 8

Sie haben zwei Möglichkeiten, wie Sie Blöcke horizontal zu platzieren: Anzeige Eigenschaft oder float Eigenschaft.

Es spielt keine Rolle, dass Sie die Breite Ihrer Elemente festgelegt haben. Sie werden weiterhin blockiert und vertikal angezeigt. Um dieses Verhalten zu ändern, verwenden Sie Sheet (beachten Sie, dass in beiden Fällen Breite, nicht max-width eingestellt werden sollte):

#container { 
    height: 200px; 
    max-width: 600px; 
    border: 1px solid black; 
    margin: auto; 
    margin-top: 10px; 
} 
#item1 { 
    height: 100px; 
    width: 200px; 
    border: 1px solid red; 
    display: inline-block; 
} 
#item2 { 
    height: 100px; 
    width: 200px; 
    border: 1px solid blue; 
    display: inline-block; 
} 

oder dies:

#container { 
    height: 200px; 
    max-width: 600px; 
    border: 1px solid black; 
    margin: auto; 
    margin-top: 10px; 
} 
#item1 { 
    height: 100px; 
    width: 200px; 
    border: 1px solid red; 
    float: left; 
} 
#item2 { 
    height: 100px; 
    width: 200px; 
    border: 1px solid blue; 
    float: left; 
}