1. 首頁
  2. 問答
  3. 2 div在同一行上，但第二個div會在添加短寬度時換行，爲什麼？

2 div在同一行上，但第二個div會在添加短寬度時換行，爲什麼？

2010-11-01 70 views
1

以下是2格，並排。但是一旦將width: 100px添加到#right，它們將不再是並排的。第二個div將換行到下一行。瀏覽器的寬度是1200像素，所以它不是一個問題，並且這發生在Firefox和Chrome上。這是什麼原因？2 div在同一行上，但第二個div會在添加短寬度時換行，爲什麼？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<style> 
    #left { 
    width: 100px; 
    float: left; 
    } 

    #right { 

    } 
</style> 

<div id='left'> 
    hello 
</div> 

<div id='right'> 
    world 
</div>

來源

2010-11-01 太極者無極而生

+0

我有這個權利嗎？ http://jsfiddle.net/orolo/S5qnJ/ – orolo 2010-11-01 16:24:21

+0

是的，當寬度被添加到'＃右側'時，它們不再並排...... – 2010-11-01 16:26:53

回答

0

添加float：留給#right，它會解決問題。如果未指定浮點數，Divs將定位在新行上。

來源

2010-11-01 16:23:38

+0

請注意，問題是，它爲什麼會發生？我通常浮動第二個div，但只是想知道爲什麼寬度會產生這樣的差異 – 2010-11-01 16:27:45

+0

我認爲增加尺寸的div改變它的浮動。順便說一下，在IE7中，即使添加尺寸，它們也是在同一行中。所以我想這是瀏覽器的行爲。默認情況下，元素沒有浮動。 – 2010-11-01 16:32:59

+0

據推測，當左邊的div浮動時，它被「取出正常的文檔浮動」......並且它位於左邊，然後第二個div現在應該考慮該形狀的畫布並開始正常浮動的文件。所以「並排」行爲是標準的。爲什麼有一個寬度時，它會發生變化，可能對規格有些微妙。 – 2010-11-01 16:39:30

1

漂浮在CSS中是有趣的事情。他們很容易造成這種混亂。

我推薦在您的示例中使用display:inline-block;（在這兩個div上）而不是float:left;。它可能會更接近你的期望。

來源

2010-11-01 16:24:14 Spudley

相關問題

 相關問題