为什么我的两个小的DIV不能在这个大的DIV中并排排列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>联系我们</title> <link href="../css/Contact_us.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="head"> <div class="logo"> <img src="../img/index/logo.jpg" /> </div> <div class="nav"> <ul> <li><a href="index.html">首页</a></li> <li><a href="Company_profile.html">公司简介</a></li> <li><a href="Hui_life.html">慧生活</a></li> <li><a href="Product_Center.html">产品中心</a></li> <li><a href="Contact_us.html">联系我们</a></li> </ul> </div> </div> <div class="content"> <div class="content01"></div> <div class="content02"></div> </div> </body> </html>
*{
margin: 0px;
padding: 0px;
}
.head{
width: 100%;
height: 104px;
}
.logo{
float: left;
margin-left: 200px;
}
.nav{
float: right;
}
.nav ul{
list-style: none;
}
.nav ul li{
display: inline;
margin: 0px 30px;
line-height: 104px;
font-size: 20px;
font-family: "黑体";
}
.nav ul li a{
text-decoration: none;
}
a:link{
color: black;
}
a:visited{
color: black;
}
a:focus{
color: darkgreen;
}
a:hover{
color: gray;
}
a:active{
color: skyblue;
}
.content{
width: 1300px;
height: 900px;
border: 1px black solid;
margin: 0px auto;
}
.content01{
width: 280px;
height: 880px;
border: 1px black solid;
float: left;
}
.content02{
width: 920px;
height: 880px;
border: 1px black solid;
float: right;
}
1
收起
正在回答
3回答
你好同学 ，在老师这里显示正常 ，两个盒子能够排列一起显示。因为没有同学使用的logo图片 ，可能是logo图片导致的。因为img是行内元素 ，会有一个默认的间隙 ，这是一个特殊现象，间隙导致整体高度溢出 ，盒子被挡住，浮动不过去。解决方式是把图片设置成display: block;
如果没有解决问题 ，建议同学描述一下使用的哪个课程的图片，以便老师准确高效的帮助你查找问题。
祝学习愉快 ！望采纳。
相似问题
为什么两个DIV不能再一个大的DIV中并排排列
0
0
4
为什么答案是降序排列
47
0
7
什么情况下用一个新的div呢
31
0
5
老师，我想问一个问题！
0
0
4
为什么我设置了三个div，只显示两个。
49
3
13
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星