位置兩個水平旁邊的彼此

在不同的項目上我學到了兩個不同的方法定位兩個水平彼此相鄰的div。其中一個比另一個更好，還是僅僅是一個個人品味的問題，或者一個人只能通過偶然/純粹的運氣來工作？位置兩個水平旁邊的彼此

方法之一：

<div style="border:1px solid red;"> 
    <div style="float:left;"> 
     first 
    </div> 
    <div style="float:left;"> 
     second 
    </div> 
    <div style="clear:both;"> 
</div>

方法二：

<div style="border:1px solid green;"> 
    <div style="display:inline-block;"> 
     first 
    </div> 
    <div style="display:inline-block;"> 
     second 
    </div> 
</div>

來源

2012-11-23 Michel

第一個是更廣泛的支持在舊的瀏覽器，但float通常會導致一些怪異的行爲（不壞，沒有什麼會打破你的設計，只是有點意外）。

當你在生命週期的後期檢查一些隨機的瀏覽器時，你只能用inline-block找到破壞設計的東西。

我通常堅持float，只有float。

來源

2012-11-23 08:28:05 Ben

如何處理兩個以上需要水平對齊的div？例如，如果有三個div？沒有'float：middle;'對嗎？ – Solace

@Zarah - 不幸的是沒有'float：middle;'（小哈哈）和三個div等高的列，你需要谷歌它，有很多（複雜）的方法。兩個div相當簡單：http://stackoverflow.com/questions/4028833/two-divs-left-should-be-fixed-width-right-should-fill-rest-of-space/4031247#4031247，基本概念是使用浮動div和常規div，在浮動的常規上放置一個邊距。 – Ben

非常感謝您的回覆。「基本的想法是使用浮動div和常規div，在浮動的範圍內放置一個邊界。」 - 這是有道理的。我會谷歌它。 – Solace

如果您正在使用第二種方法，那麼如果您將其轉換爲內聯元素，則無需使用DIV。只需使用SPAN標籤即可。

因此，如果您嘗試對齊塊級元素/標記，請使用第一種方法。

來源

2012-11-23 08:28:54

好點，沒想到那個。但是如果我想添加填充/邊距，Span總是給我一個問題... – Michel

使用Float（第一種方法）。因爲它支持所有的瀏覽器和易於處理。這裏的link你可以瞭解更多

來源

2012-11-23 08:32:55 Selvamani

這兩個都是有效的CSS不會偶然工作 - 這取決於你需要什麼。

使用float s時，您需要清除它們（如在發佈的代碼中）;當使用inline-block時，這不是必需的。此外，您可以使用text-align來對齊inline-block元素，而沒有float: middle。您還可以使用vertical-align屬性根據需要對齊框。

正如其他人所說，inline-block存在一些問題，最值得注意的是，較老的IE不支持它（很多）塊元素（請注意，它在內聯元素上工作正常，如<span>）。您可以通過以下方法解決該問題：

.selector { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
}

來源

2012-11-23 08:35:36

位置兩個水平旁邊的彼此

回答

相關問題