div的对齐

Question

div的默认行为是什么？

我注意到，即使把一个div的宽度让我们说100px， 如果我把第二个div具有相同的宽度将把它放在第二个line.so默认是不重要的宽度。它把它放在不同的线上？ 在这种情况下，我明白浮动的需要。 我以为任何元素我放在一个HTML页面，他们会并排，除非我添加一个断元素或段落或该角色的东西。 或者，也许我不正确使用它div这种对齐，但我真的想 澄清这一点。

Answer 1

div元素默认为display: block。

该值使元素生成块框。

rendering of them is described here的

块级元素是视觉上格式化为块（例如，段落）源文档的那些元素。 'display'属性的以下值构成一个块级别：'block'，'list-item'和'table'。

块级框是参与块格式上下文的框。

和then here

在块格式化内容，框后布置一个在另一个地，垂直地在包含块的顶部开始。

要停止这种渲染，您可以使用float来使块级别的元素彼此相邻。您也可以修改div的显示属性。

Answer 2

默认情况下，DIV占用了屏幕的100％，即使设置了宽度，右侧的空间也不能被任何东西占用。

试试这个：

的方式对同一线上的两个格将让他们漂浮：

<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div> 

<div style = 'float:left;width:100px;'> There</div> 

Answer 3

Div的是这意味着它们堆叠块级元素 ...像块。虽然这听起来很合理，因为宽度可以让他们没有浮动地并排安装，但这不是他们设计的行为方式。

如果元素是相对于一个块一个直列元件，其行为是适合并排侧。如果你想将两个想法结合在一起，你可以在div上强制这个行为。你可以这样做：

<div style="display:inline-block"></div> 

这将使div来维持它的其他块属性，但允许它内嵌适合文本和图像会，如果这个你期望的目标，避免使用浮动。