麻烦老师解决一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>作业</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;text-decoration: none;} .header{width:100%;height:100px; background-color:black; } .logo{float: left;} .nav{float:right; } li{float:left; margin-left:50px; margin-right:30px; color:white; line-height:100px; } .main{width:100%;height:80%;} .content1{width:50%;height:210px; float: left; border:1px solid red; } .content2{width:50%;height:210px; float: right; border:1px solid green; } </style></head><body> <div class="header"> <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div> <div class="nav"> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> </div> <div class="main"> <div class="content1"> <h3>课程推荐</h3> <table> <tr> <td>职业路径 html5与css3实现动态网页</td> </tr> <tr> <td>职业路径 零基础入门与android</td> </tr> <tr> <td>职业路径 ios基础语法与常用控件</td> </tr> <tr> <td>职业路径 php入门开发</td> </tr> <tr> <td>职业路径 JAVA入门开发</td> </tr> </table> </div> <div class="content2"> <h3>相关课程</h3> <table> <tr> <td>HTML CSS JavaScript</td> </tr> <tr> <td>HTML5 CSS3 Jquery</td> </tr> <tr> <td>移动端基础 移动端开发</td> </tr> </table> </div> </div> <div class="footer"></div></body></html> |
为什么给content1和content2左右浮动后，出现这种情况，麻烦老师解答。谢谢！
0
收起
正在回答
1回答
同学你好
由于图片自身的边距，导致高度超出。 例：
建议修改： 设置fong-size:0; 消除图片的边距带来的影响
盒子在页面中是占据的宽度 = width + padding + boder + margin, 这里需要考虑到1px边框带来的影响，建议： 调整盒子的宽度， 使内容能够在一行显示。例：
如果帮助到了你， 欢迎采纳
祝学习愉快~~~
相似问题
老师，麻烦看一下
5
0
2
老师,麻烦帮帮我,找了很久也没解决的问题!
0
0
4
老师，麻烦看一下
11
0
4
老师麻烦看一下 调试不出来 代码如下
6
0
2
麻烦老师解答一下，感谢
24
0
3
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧