<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0;margin: 0;font-family: "微软雅黑"; } li{ list-style: none; text-align: center; } a{ text-decoration: none; } body{background: rgb(137,216,230);} /*--------------头部----------*/ .header{ width: 100%; height: 100px; background: black; } .img{ float: left; } .header ul{ float: right; width: 600px; } .header ul li{ float: left; width: 100px; height: 100px; line-height: 100px; font-size: 20px; } .header ul li a{ color: #fff; } /*-------------主体部分----------*/ .contain{ width: 90%; margin: 0 auto; height: 800px; } .left{ width: 60%; height: 100%; float: left; } .middle{ width: 1%; height: 100%; background: rgb(238,149,114); float: left; } .right{ width: 39%; height: 100%; float: right; } </style></head><body> <div class="all"> <div class="header"> <div class="img"> <img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"> </div> <ul> <li><a href="#">课程</a></li> <li><a href="#">职业路径</a></li> <li><a href="#">实战</a></li> <li><a href="#">猿问</a></li> <li><a href="#">手记</a></li> </ul> </div> <div class="contain"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="footer"></div> </div></body></html>我这个没有写完，写在这里卡主了，因为我的contain容器已经设置了宽高，我的left,middle,right也设置了宽高（而且他们的宽加起来是100%），但是left在浮动的时候并没有紧贴着contain容器浮动，而是中间隔了一大片空隙，这是为什么？
1 回答
__innocence
TA贡献313条经验 获得超208个赞
虽然他们的宽度加一起是100%，但是每一块，计算宽度的时候，并不是精确的值，计算的宽度的时候，因为小数点的原因，一部分宽度丢失了。你可以审查元素，看看父容器的宽度和子元素的宽度，它们并不是60%，1%，39%
- 1 回答
- 0 关注
- 1916 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消