在div中定位三個元素

我在最後提供的示例代碼中說明了我的問題。基本上，我有一個div容器，它包含左側的一些工具，中間的主要內容以及右側的一些工具（可視化左側工具用於提供拖動，視覺右側工具用於刪除內容）。但是，如果我在主要內容上放置背景顏色，着色溢出到浮動在左側但不在右側的東西（目前僅在Firefox 3.5中測試過）在div中定位三個元素

下面的代碼：

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    .delete{ 
     float:right; 
    } 
    .main{ 
     width:450; 
     background-color:ccc; 
    } 
    </style> 
</head> 
<div id="container"> 
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div> 

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

來源

2009-08-23 FurtiveFelon

查看將'* {border：solid 1px black}'添加到您的樣式時會發生什麼。 – voyager 2009-08-23 19:55:58

我能得到你想要的東西與

<style type="text/css"> 
*{border:solid 1px black} 
#container{ 
    width:500px; 
} 
.handle{ 
    float:left; 
} 
.delete{ 
    position:relative; 
    right:50px; 
    float:right; 
} 
.main{ 
    width:390px; 
    padding:9px 30px; 
    background-color:ccc; 
} 
</style>

但不妙。

來源

2009-08-23 19:59:43 voyager

如果你的意圖是隻提供給用「主要」級指定的元素，你需要做以下更改HTML標記和CSS背景色：

移動元素與指定的標有「處理」和「刪除」標記之間的「主」類。

<div class="c"> 
<p class="handle">...</p> 
<p class="main">...</p> 
<p class="delete">...</p> 
</div>

添加「浮動：左」的樣式「主要」

.main{ 
    ... 
    float:left; 
}

請注意，你有你的第二個例子一個錯字。背景顏色應該是「#ccc」而不是「ccc」。

來源

2009-08-23 21:51:10

目前還不清楚你是否想讓顏色覆蓋它們全部（左邊，主要，&右）..或者只有中間的div。

反正..如果你想讓它涵蓋所有..你需要做的主要div的寬度等於容器的寬度..，另一方面嘗試這個，例如

.main{ 
    width:500; 
    background-color:ccc; 
}

如果你想要的顏色是在只有主DIV，那麼你必須讓它浮動到左邊..這樣的事情

.handle{ 
    float:left; 
    clear: left; 
} 
.delete{ 
    float:right; 
    clear: right; 
} 
.main{ 
    width:450; 
    background-color:ccc; 
    float: left; 
}

來源

2009-08-23 23:20:32 Aziz

添加浮動：左到。主要將修復它。

下載ColorZilla firefox插件或Firebug，你會看到發生了什麼。你的.handle在你的.main的左邊被浮動，這就是爲什麼背景是#ccc。

來源

2009-08-23 23:35:54 Martin

在div中定位三個元素

回答

相關問題