css float问题，求解

shijuren 2011-06-21 05:13:08

有三个框，如果设置第一个框为浮动，那么第二框和第三个框重合；第二框浮动，第三个框背景色消失，似乎是和第二个框重合。在精通CSS书中讲，如果第一个框浮动，会遮住第二个框，为什么和书上讲的不一致呢？还有第二框浮动，为什么第三个框只是北京颜色和第二个框重合，文字还是停留在原位呢？

...全文

269 23 打赏收藏转发到动态举报

写回复

用AI写文章

23 条回复

切换为时间正序

请发表友善的回复…

发表回复

lijia_415 2011-07-06

打赏
举报

什么乱七八糟的。直接上代码。

missgd152 2011-07-06

打赏
举报

我觉得书上说的不一定正确，还是实践体现一下吧！即使树上说的是对的，但是CSS也再不断的优化，总会有点大同小异。

yo010yo 2011-07-06

打赏
举报

.one{
float:left;
background-color:#567;
height: 120px;
width:450px;
position:absolute; //这句是我加的
}
这样就跟你书上说的一样了

Super_Ninja 2011-06-28

打赏
举报

不好意思，代码贴错了。



<!DOCTYPE html>

<head>

<title>float demo</title>

<style>

.one{

float:left; 

background-color:#567;

height: 120px;

width:450px;

}

.two{

float:left;

background-color:#356;

height:120px;

width:450px;

}

.three{

float:left;

background-color:#978;

height:120px;

width:450px;

}



</style>

</head>

<body>

<div class="parent">

<div class="one">

This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block.  

</div>



<div class="two">

This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block.  

</div>

<div class="three">

This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block.  

</div>

</div>

</body>

</html>

Super_Ninja 2011-06-28

打赏
举报

该怎么回答你呢！首先，p标签是段落标签，div是块标签。你两者混合使用，想实现想要的布局效果，肯定会出问题的！建议你先把<p class="two">.......</p>换成<div>吧。不知道你想实现的布局方式是什么，难道是横向排列？如果是这样，那么适当改一下你的代码就可以了。



<!DOCTYPE html>

<head>

<title>float demo</title>

<style>

.one{ background-color:#567;

height: 120px;

width:450px;

}

.two{

background-color:#356;

height:120px;

width:450px;

}

.three{

background-color:#978;

height:120px;

width:450px;

}



</style>

</head>

<body>

<div class="parent">

<div class="one">

This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block.  

</div>



<p class="two">

This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block.  

</p>

<div class="three">

This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block.  

</div>

</div>

</body>

</html>

你加上margin属性块之间的间隔就明显了。

shijuren 2011-06-26

打赏
举报

我的代码是这么写的：
<!DOCTYPE html>
<head>
<title>float demo</title>
<style>
.one{ background-color:#567;
height: 120px;
width:450px;
}
.two{
background-color:#356;
height:120px;
width:450px;
}
.three{
background-color:#978;
height:120px;
width:450px;
}

</style>
</head>
<body>
<div class="parent">
<div class="one">
This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block. This is the No.1 div block.
</div>

<p class="two">
This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block. This is the No.2 div block.
</p>
<div class="three">
This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block. This is the No.3 div block.
</div>
</div>
</body>
</html>
浏览器是FF

Super_Ninja 2011-06-24