兩列布局。爲什麼一個是浮動：左和另一個浮動：是嗎？

我看到何時使用兩列布局（主要內容和側欄）主要內容DIV是浮動：左側欄和側欄是浮動：右側。我看到它的一個好處。當框大小：內容框; （默認），然後超過所需的空間留下來裝配在一起，然後都浮動相反，使它在任何麻煩，都適合在屏幕上！我有時會看到，當包裝器比側邊欄和內容的組合witdh（將它們放在一起）更多時，側邊欄和內容之間的空間超過期望值。這也取決於瀏覽器。兩列布局。爲什麼一個是浮動：左和另一個浮動：是嗎？

但是「box-sizing：border-box;」即使兩個部門之間沒有留下任何額外的空間，我也看到兩者完全符合預期。

哪個更好？爲什麼？

<div id="content"> 
With CSS: Float:left; 
</div> 

<div id="sidebar"> 
With CSS: Float:right; 
</div>

或者，

<div id="content"> 
With CSS: Float:left; 
</div> 

<div id="sidebar"> 
With CSS: Float:left; 
</div>

想想響應式設計的爲好。

來源

2013-10-18 Satya Prakash

'float：left;'意味着您必須擔心它們之間的差距。使用'float：right'意味着你沒有。我認爲... – ediblecode

兩者都不如其他。它們的行爲不同，但在某些條件下可以產生相同的結果。

方案浮動一個容器時向右是偉大的：

如果側邊欄上的內容的左側你需要在你的標記，如果這兩個內容之前將其float在左邊。這對SEO目的不理想。如果你在兩個方向上都是float，它們在標記中出現的位置並不重要。
如果你需要正確的元素對齊到最右側，你應該float它在右邊。如果在左側行駛float，則不能這樣做，因爲不同的瀏覽器引擎以不同方式呈現子像素。即使只有幾個像素關閉，某些佈局可能看起來很糟糕。
作爲最後一點的延續，您不需要兩個元素width: 50%。由於再次是子像素四捨五入，因此比50稍低的百分比，如49.9％。爲避免出現佈局，您可能需要float右邊的元素。

浮動兩個元件以相同側時的方案可能更好：

當兩個元件應當彼此相鄰對準。
真的不能想到別的。

我通常是float正確的元素，但他們往往是可以互換的。

來源

2013-10-18 10:22:04

還有一個原因要問是因爲邊欄中的內容和主內容div中的內容應該與公共邊界的距離相等。在相反的方向使用浮動有時距離不相等。但是，根據你的觀點，最好是在相反的方向上浮動，並使用包裝來包含「內容」和側邊欄div在正確的距離。 –

雖然我明白這可能是不合理的，這取決於佈局，但即使你向右「漂浮」了一個元素，仍然可以使用「padding」控制分隔符之間的距離。但是，再次，這並不重要。 –

兩列布局。爲什麼一個是浮動：左和另一個浮動：是嗎？

回答

相關問題