关于div 的浮动问题

发布网友 发布时间：2022-04-20 11:43

我来回答

共3个回答

热心网友 时间：2022-04-20 13:13

要达到什么样效果，请说明！比如new和link在中间，一定要描述清楚。

仔细看了一下你的代码，原来是使用浮动属性，高度和宽度不一致导致的错位的问题。在其外层套一个DIV即可。

增加了2个样式#a01和#a02，代码如下，已通过测试：

<style>
* {
 margin:0;
 padding:0;
}
body {
 width:1100px;
 margin:0 auto;
 font-size:12px;
}
#header {
 width:1100px;
 height:120px;
 background:red;
}
#nav {
 width:900px;
 height:50px;
 background:green;
 float:left;
}
#search {
 width:200px;
 height:50px;
 background:pink;
 float:left;
}
#hot {
 width:560px;
 height:300px;
 background:blue;
 float:left;
}
#notice {
 width:560px;
 height:300px;
 background:yellow;
 float:left;
}
#news {
 width:340px;
 height:600px;
 background:red;
 float:left;
}
#link {
 width:200px;
 height:300px;
 background:green;
 float:left;
}
#topic {
 width:200px;
 height:300px;
 background:pink;
 float:left;
}
#a01 {
 width:560px;
 height:600px;
 float:left;
}
#a02 {
 width:200px;
 height:600px;
 float:left;
}
</style>


<div id="header">header</div>
<div id="nav">nav</div>
<div id="search">search</div>

<div id="a01">
<div id="hot">hot</div>
<div id="notice">notice</div>
</div>

<div id="news">news</div>

<div id="a02">
<div id="link">link</div>
<div id="topic">topic</div>
</div>

热心网友 时间：2022-04-20 14:31

对啊，你要告诉别人你想要的效果才知道你那里错了，不过，按我的理解，你是不是觉得new和link要下来，各占一行啊，你做了浮动，块元素就不可能各占一行的哦，只有清除浮动，蓝色那个各占一行是因为*块太大，超过了你的宽度，所以他看起来站了一行

热心网友 时间：2022-04-20 16:05

什么叫卡住了 你希望它们是什么样子追问就是浮动上去，紧挨着上面，每块连在一起，

追答浮动元素的总宽度不能超出父元素的宽度，不然就会换行