0

情况是：

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;
}

结果： 在此处输入图像描述

为什么文本不在div#a后面？为什么“某些文本”的行为就像div#a仍在正常流程中一样？如何强制文本按预期运行（在 div#a 下）？

更新： 当我的意思是在下方时，我的意思是在 Z 轴下方，而不是在 Y 轴下方。div 应该保持在这个位置，唯一需要移动的部分是文本。

4

7 回答 7

1

如果浮动一个元素，下一个元素将“触摸”它，如果它有位置并且它是块级元素（本机或由 CSS 设置）。

如果您希望元素“不”彼此相邻，则不要使用浮动！请记住，它们必须是块级才能彼此下方。

浮动不会“提升”元素，例如position: absolute会这样做。

于 2012-09-21T13:19:39.500 回答
1

看看这个：

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=ba 负 z 索引信任这很有帮助

于 2012-09-21T13:50:14.313 回答
1

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

• left
该元素生成一个向左浮动的块框。内容在框的右侧流动，从顶部开始。

的内容#b是应有的作用。它浮动到它前面的浮动元素的右侧。

因此，如果您想要“分层”效果，请使用可以正确提供它的 CSS 声明：position

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

#main { position:relative }
#a { position:absolute }
于 2012-09-21T13:50:41.843 回答
0

浮动元素浮动到非浮动元素的左侧，如蓝色元素。要强制浮动元素下方的蓝色元素，您可以clear: left;对其应用。

于 2012-09-21T12:54:20.810 回答
0

如果您的两个 div ID 都分配了 float:left 则第二个 div #b 将效仿并位于 #a 下方

于 2012-09-21T13:02:18.007 回答
0

添加此代码：

float:left;

#b 风格

于 2012-09-21T13:10:23.100 回答
0

给#a、#b两个显示块

于 2012-09-21T13:33:40.520 回答