在容器中定位 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 的宽度足以容纳这两项。

注意：这仅适用于 learning/curiosity。我知道我可以使用边距和定位将它们放在我想要的位置。但是，我只是好奇为什么它会这样。

谢谢。

Answer 1

如果您不使用 bootstrap 或其他框架，

<div> 标记始终以新行开头。如果你想在一行中看到多个项目，那么添加 css 比如 display: inline-block

Answer 2

请像下面这样替换您的 class。

#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 3

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

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

Answer 4

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

将 display : inline-block 添加到 div 的 css 会给你想要的东西。

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 中的新元素是页眉、页脚、节等。

即使您指定了宽度，它也不允许其他元素紧挨着它。这是块级元素的属性。

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

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

Answer 7

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

即height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px

#container {
 height: 204px;
}

Answer 8

您有两种水平放置方块的方法：显示属性或浮动属性。

为元素设置宽度并不重要。它们仍然是块状并垂直显示。要更改此行为，请使用样式表（请注意，在这两种情况下都应设置 width，而不是 max-width）：

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

在容器中定位 div

Positioning divs inside a container

html

css

positioning