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來維持它的其他塊屬性，但允許它內嵌適合文本和圖像會，如果這個你期望的目標，避免使用浮動。