在容器内部定位div

Question

我有一个关于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>

我的问题是，为什么#item1和#item2的div去对方的下方，而不是彼此相邻的？是不是他们不再是块级别的元素，因为我已经为它们指定了一个设置宽度？为什么他们不在#container里面并排排列？ #container有足够的宽度来容纳这两个项目。

注意：这是严格的学习/好奇心。我知道我可以使用利润率和定位将它们放在我想要的位置。不过，我只是好奇它为什么这样表现。

谢谢。

Answer 1

Div元素是块元素，除非您将display属性指定为内联或内联块，否则它将不像其他内联元素那样对齐到右侧。

添加显示：内联块的div的CSS会给你你想要的。

Answer 2

<div>如果你不使用bootstrap或其他框架，标签总是以新行开头。如果你想看到单行中的多个项目，然后添加CSS像display: inline-block

Answer 3

请替换您的类如下所示。

#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

#container即你div有块的显示属性。如果您不将其设置为其他任何属性，则这是一个默认属性。在你的情况下，div采用这个默认的显示属性。

要并排查看＃item1和＃item2，只需在#container中使用display：inline-block即可。

Answer 5

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

Answer 6

div是标准的块级元素。块级元素从新行开始，并尽可能向左和向右伸出。其他常见的块级元素是p和form，而HTML5中的新元素是header，footer，section等等。

即使您指定宽度，它也不会允许旁边的其他元素。这是块级元素的属性。

使用css inline-block它将占用指定的宽度或内容宽度。

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

Answer 7

容器的height应该是孩子的div高度的之和孩子

即边界的高度。，height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px

#container { 
height: 204px; 
} 

Answer 8

你有两种方式水平放置你块：显示财产或浮动财产。

这并不重要，你已经为你的元素设置宽度。它们仍然是块并垂直显示。 要改变这种行为，使用样式表（注意，在这两种情况下宽度，不最大宽度应设置）：

#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; 
} 

或本：

#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; 
}