css漂浮物體

這可能是一個非常簡單的問題，但我無法得到它的工作。css漂浮物體

我想要的只有2個盒子（左和右），兩者都應占50％的空間，並且應該彼此相鄰。

我現在的CSS看起來是這樣的：

#left { 
    text-align: right; 
    width: 50%; 
    padding-right: 10%; 
    float: left; 
} 

#right { 
    width: 50%; 
    text-align: left; 
    padding-left: 10%; 
} 

#footer { 
    clear: both; 
}

的HTML看起來像這樣：

<div id='left'> 
    <h1>Left</h1> 
    <ul> 
    <li>Some Listing</li> 
    </ul> 
</div> 

<div id='right'> 
    <h1>Stuff</h1> 
    <p> 
    Stuff right 
    </p> 
</div> 

<div id='footer'> 
</div>

正如我所說的，這是行不通的。但我認爲應該清楚它應該做什麼。

來源

2010-11-01 Kai

有兩件事情我需要做的，使其工作：

1）寬度+ DIV每一個的填補只能增加高達50％。否則，在您的原始代碼中，它們合計爲60％，兩者合計爲120％，並且它們不能適應身體的100％寬度。

2）我必須還飄起了第二個div的左側，或使雙方的div overflow: hidden

（我仍然在尋找到爲什麼需要第2步）

來源

2010-11-01 15:46:55

您必須考慮填充和邊距。在指定任何除0之外的填充時，在每個<div>上放置50％將導致<div>換行。嘗試去除<div>上的填充，或將寬度從50％減少到45％，並查看它的外觀。

來源

2010-11-01 15:30:04 dotariel

完整樣式重置將確保您避免犯XSaint提到的任何事情。邊距，邊界和填充會影響這一點。如果你想有填充和邊框，一定要相應減少元素的寬度

div { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

：

所以你應該確保這些元素。一個文檔值得參考的是盒模型，即圖象是值得1000個字：

http://www.w3.org/TR/CSS2/box.html

在該圖下方的說明，它指出寬度影響內容框的寬度，而不是填充，邊框或邊緣框。那是所有其他人的盒子。

來源

2010-11-01 15:43:53

你既可以做什麼XSaint32有建議或從#left div中刪除填充並將另一個div #context填充到#left div內。即

來源

2010-11-01 15:52:51 alex

Xsaint和Danny Staple給出了迄今爲止最好的答案。

只需補充答案，您也可以使用名爲「box-sizing」的屬性以確保正確的計算。

我甚至建議將此屬性添加到您的（和其他人）CSS重置中，因此Webkit，IE，Opera和Mozilla傾向於使用不同的框模型。

來源

2010-11-01 15:58:19 Dave

回答

相關問題