將div元素對齊到右側並重疊

<div style="border: 1px solid">Hello</div> 
<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
<div style="border: 1px solid">World</div>

我想將第二個div對齊到右側，因爲它只有30％的寬度。但是，當我使用float時，第三個div與第二個div重疊。我如何確保3rd div在第一格之後不是第二格之後纔會出現。文本對齊無濟於事，因爲我希望整個div在正確的方面不僅僅是它的內容。將div元素對齊到右側並重疊

請建議。

來源

2012-02-27 SoulMan

你有沒有試過清：both;在第三個div？這消除了之前一切的浮動。 – 2012-02-27 09:31:21

你想要第三個Div在哪裏？ – Starx 2012-02-27 09:38:42

它工作！但我不明白，如果它刪除浮動，爲什麼我必須使用浮動。有沒有辦法將div與右邊對齊而不會浮動？也希望清楚：兩者都不會影響頁面中的其他任何浮動內容？ – SoulMan 2012-02-27 09:46:01

此代碼在Dreamweaver中適用於我，但出於某種原因不適用於jsfiddle？如果你知道原因，請留下評論。

http://jsfiddle.net/WAWN2/

<div style="border: 1px solid; width:100%">Hello</div> 
<div style="float: right;border: 1px solid; width:30%; display:block;">Centre</div> 
<div style="border: 1px solid; width:100%">World</div>

而且，這裏是使用透明的例子：兩個

http://jsfiddle.net/NyFGB/

來源

2012-02-27 09:51:11 Undefined

抱歉以上代碼在firefox，chrome，safari中無法使用 – SoulMan 2012-02-28 04:02:53

移動的第二個div上面HTML中的第一個，以獲得的佈局你想要的方式它：

<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
 
<div style="border: 1px solid">Hello</div> 
 
<div style="border: 1px solid">World</div>

來源

2016-04-25 10:31:22

將div元素對齊到右側並重疊

回答

相關問題