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属性指定为inline或inline-block，它不会像其他内联元素一样向右对齐。

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

Answer 2

您可以通过两种方式水平放置块：显示属性或浮动属性。

为元素设置宽度并不重要。它们仍然是块状并垂直显示。要更改此行为，请使用样式表（请注意，在两种情况下都应设置宽度，而不是 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;
}

Answer 3

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

<div>标记始终以新行开头。如果您想在单行中看到多个项目，请添加display: inline-block

等CSS

Answer 4

请替换下面的课程。

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

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

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

Answer 6

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

Answer 7

div是标准的块级元素。块级元素从新行开始，并尽可能向左和向右延伸。其他常见的块级元素是p和form，HTML5中的新元素是页眉，页脚，部分等。

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

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

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

Answer 8

容器的height应该是子div的高度之和以及孩子边界的高度

ie。，height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px

#container {
 height: 204px;
}

将div放在容器内

8 个答案: