文本在浮動DIV

HTML：

<div id="main"> 
    <div id="a"></div> 
    <div id="b">Some Text</div> 
</div>

CSS：

#a{ 
    float:left; 
    width:800px; 
    height:150px; 
    background-color:#CCC; 
} 

#b{ 
    width:1000px; 
    height:100px; 
    background-color:#9CC; 
}

結果： enter image description here

爲什麼沒有文字div＃a？爲什麼「Some Text」表現得好像div＃a是仍然在正常流程？如何強制文本按預期行事（在div＃a下）？

UPDATE： 當我的意思下，我的意思是在Z軸的下方，而不是在Y. div的應該留在這個位置上，需要移動的是文本的唯一部分。

來源

2012-09-21 Andrew G.H.

你爲什麼不使用職位？ – Champ

這是CSS的工作方式，如果你想讓「某些文本」出現在你的灰色div內，你可以在它周圍放一個容器，定位該相對位置，然後將你的「Some Text」div定位到絕對位置。 – Matthew

http://www.w3.org/wiki/CSS/Properties/float

留下
元素生成一個向左浮動的塊框。內容在框的右側從頂部開始流動。

#b的內容按其應有的方式行事。它漂浮在它前面的浮動元素的右側。

因此，如果你想有一個「分層」的效果，請使用CSS聲明，將正常提供的：position

注：保持#a定位到它的父，而不是<body>：

#main { position:relative } 
#a { position:absolute }

來源

2012-09-21 13:50:41 Dawson

優秀的答案 –

浮動元素漂浮在非浮動元素（如藍色元素）的左側。要強制浮動元素下方的藍色元素，您可以將clear: left;應用於它。

來源

2012-09-21 12:54:20

如果同時你DIV ID的有浮動：左分配，則第二個div＃B將跟風去#A

來源

2012-09-21 13:02:18 davidb

對不起，我從問題 –

閱讀更新如果你刪除浮點數：在#a上留下並在#b上添加float：right，它會下降。您將不得不調整兩個div的寬度以便排列 – davidb

我不想讓它們內聯，我想將它們重疊在Z軸上 –

下方添加以下代碼：

float:left;

到＃B風格

來源

2012-09-21 13:10:23 Afshin

沒有完成這項工作，它只是表現得好像我會說清楚：left：to＃灣目的是讓文本不會「看到」div＃a，並且通常應該包含在div＃b中。 –

如果浮動一個元素，下一個元素將觸摸它，如果有它的位置，它是一個塊級元素（本地或CSS設置）。

如果你想要元素「不」彼此相鄰，比不使用浮點數！請記住，他們必須是塊級別才能在彼此之下。

浮動不會「擡起」元素，例如position: absolute會這樣做。

來源

2012-09-21 13:19:39 Mark

當然，float只是將元素從正常流中退出。請參閱http://www.alistapart.com/articles/css-floats-101/中的示例E，這是我希望div a和b在Z軸上重疊的原則，但唯一的問題仍然是b的內容似乎無視其父母的流量。 –

給顯示塊既＃A，＃B

來源

2012-09-21 13:33:40 Maddy

你測試過了嗎？它工作嗎？ –

你可以使用float：left;或顯示：塊;對於＃a，＃b – Maddy

看看這個：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我認爲z-index的聲明也可能是有用的

附錄

<style type="text/css"> 
<!-- 
#id { 
position:relative; 
} 

#a{ 
/* float:left; */ 
position: absolute; 
top:0%; 
left0%; 
width:800px; 
height:150px; 
background-color:#CCC; 
    z-indez:1; 
} 

#b{ 
position: absolute; 
top:0%; 
left0%; 
width:1000px; 
height:100px; 
background-color:#9CC; 
    z-index:-1; 
}

是否有訣竅（在chrome，ff，IE6中）我無法'弄不明白工作，直到我給ID = B負Z指數信任那樂於助人

來源

2012-09-21 13:50:14 marcusBMG

文本在浮動DIV

回答

相關問題