在CSS中定位div的最佳方式是什麼？

Question

我試圖把這個菜單：

<div class="left-menu" style="left: 123px; top: 355px"> 
    <ul> 
     <li> Categories </li> 
     <li> Weapons </li> 
     <li> Armor </li> 
     <li> Manuals </li> 
     <li> Sustenance </li> 
     <li> Test </li> 
    </ul> 
</div> 

在頁面的左側。問題是如果我使用絕對值或固定值。
不同的屏幕尺寸會以不同的方式呈現導航欄。我還有第二個div，其中包含所有主要內容也需要移動到右側，到目前爲止，我使用的是相對值，無論屏幕大小如何，它都可以工作。

Answer 1

float確實是實現此目的的正確屬性。但是，bmatthews68給出的例子可以改進。關於浮動框最重要的是他們必須指定一個明確的寬度。這可能相當不方便，但這是CSS工作的方式。但是，請注意，px是在HTML/CSS世界中沒有地位的度量單位，至少不指定寬度。

務必採取措施，使用不同的字體大小，即使用em或%。現在，如果菜單是以浮動體的形式實現的，那麼這意味着主要內容會「浮現」它。如果主要內容是比菜單更高，這可能不是你想要什麼：

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div> 
<div>Right, spanning<br/> multiple lines</div> 

您可以通過給主要內容等於菜單的寬度margin-left糾正此行爲：

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div> 
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div> 

在大多數情況下，你也想給主要內容padding-left因此它不會「緊貼」菜單。

順便說一下，改變上面的內容以使菜單位於右側而不是左側：將每個出現的單詞「left」更改爲「right」。

啊，最後一件事。如果菜單的內容高於主要內容，則會產生奇怪的結果，因爲float會做一些奇怪的事情。在這種情況下，您將不得不清除浮動體下方的框，如bmatthews68的示例。

/編輯：該死的，HTML預覽顯示它的方式不工作。好吧，我已經包含了圖片。

Answer 2

我認爲你應該使用float屬性來定位類似的東西。 You can read about it here.

Answer 3

您應該使用float和clear CSS屬性來獲得所需的效果。

首先，我爲我的佈局中的兩列定義了被調用的左側和右側的樣式，以及用於重置頁面流的清理器樣式。

 
<style type="text/css"> 
.left { 
    float: left; 
    width: 200px; 
} 
.right { 
    float: right; 
    width: 800px; 
} 
.clear { 
    clear: both; 
    height: 1px; 
} 
</style> 

然後我用它們來佈置我的頁面。

 
<div> 
<div class="left"> 
    <ul> 
    <li>Categories</li> 
    <li>Weapons</li> 
    <li>Armor</li> 
    <li>Manuals</li> 
    <li>Sustenance</li> 
    <li>Test</li> 
    </ul> 
</div> 
<div class="right"> 
    Blah Blah Blah.... 
</div> 
</div> 
<div class="clear" /> 

Answer 4

所有說的使用浮動（明確寬度）的答案是正確的。但要回答最初的問題，定位<div>的最佳方法是什麼？這取決於。

CSS是高度上下文的，頁面的流程取決於HTML的結構。正常流程是元素及其子元素將在其包含塊（通常爲父元素）內從頂部到底部（用於塊元素）和從左到右（用於內聯元素）的佈局。這是大多數佈局應該如何工作的。您將傾向於依靠width，margin和padding來定義元素與其周圍的其他元素（不管它們是<div>,,<p>，否則，此時HTML基本上是語義的）的間距和佈局。

像float或absolute或relative定位使用樣式可以幫你實現你的佈局非常具體的目標，但要知道如何使用它們是很重要的。如上所述，float通常用於將塊元素彼此相鄰放置，對於多列布局非常有用。

我不會去到更多的細節在這裏，但你可能想看看以下內容：

• SitePoint CSS References - 可能是最直接的，完整的CSS參考我在網上找到。
• W3C CSS2.1 Visual Formatting Model - 是的，它是一個艱難的閱讀，但它確實解釋了一切。

Answer 5

你可以使用float

<div class="left-menu"> 
<ul> 
<li> Categories </li> 
<li> Weapons </li> 
<li> Armor </li> 
<li> Manuals </li> 
<li> Sustenance </li> 
<li> Test </li> 
</ul> 
</div> 

在CSS文件

.left-menu{float:left;width:200px;}