爲什麼這些div不是水平對齊的？他們爲什麼會突破？

此HTML：爲什麼這些div不是水平對齊的？他們爲什麼會突破？

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
</div>

爲什麼是紅色的div不一樣的水平行中，我如何讓他們在同一行？

來源

2014-09-21 Morten Pedersen

基本HTML 101的div是塊級元素。它們將自然地顯示在彼此之上。 – Chris 2014-09-21 01:32:48

將'float：left'添加到'display：inline-block'上的div上。 – andrex 2014-09-21 01:42:24

在（非常相關的）一面注意，您應該不惜一切代價避免內聯樣式。 – royhowie 2014-09-21 03:36:17

好了，所以的div是塊元素有時我使用div來包含菜單。因此，您可以將名爲display: inline-block的樣式屬性添加到內部div，並且如果您希望這些div位於容器div內部，則可以使用text-align: center。它將適用於所有類型的塊元素。

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

來源

2014-09-21 01:59:07

這是div s和所有其他塊元素的默認行爲。要更改它，您必須設置display到inline-block或float到left或right。（設置float: left;將證明元素靠在其容器的左側，float: right;將證明他們在右側。）我建議練習inline-block。這通常是一個更好的解決方案，因爲它將元素保留在文檔的正常流程中，而不是將它們從與相鄰元素的交互中刪除，因爲float會這樣做。

來源

2014-09-21 01:34:00

這裏就是你要找的內容：

<style type="text/css"> 
    div.littleDiv { 
     display: inline-block; 
     border:1px 
     solid red; 
     height:50px; 
     width:80px; 
    } 
</style> 
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
</div>

這已經可以使用浮動很長一段時間，但現在inline-block的那就更簡單了。內嵌塊元素就像內聯元素，但它們可以有寬度和高度。

然而，你可能想使用float: lefts代替display: inline-block;

從MDN

浮動CSS屬性指定的元素應該從正常流動採取並沿左側或右側放置它的容器的邊，文本和內聯元素將圍繞它。浮動元素是float的計算值不是none的元素。

來源

2014-09-21 01:35:53

如果您'要提供一個基於類的標記（這是非常好的），你應該走完整英里並刪除整個內聯樣式 – Devin 2014-09-21 01:37:13

@fabio你絕對正確，謝謝 – 2014-09-21 01:38:04

Div元素是塊風格的元素，默認情況下。爲了使其在水平LVL使風格顯示屬性內聯塊或浮動它們向左或向右：

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
</div>

OR：

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
    </div>

來源

2014-09-21 01:38:21

這一次的伎倆，其他的答案是缺少這個細節的text-align：中心;.

謝謝你們！

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

來源

2014-09-21 08:25:05

爲什麼這些div不是水平對齊的？他們爲什麼會突破？

回答

相關問題