用float进行三栏布局为什么最后一栏会下沉？
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="new_file.css"/>
</head>
<body>
<div id="wrap">
<div id="left">
<img src="10361578_222507517000_2.jpg" />
<p>Poi$on</p>
</div>
<div id="main">
美国街头品牌 SSUR 人气支线 SSUR*PLUS 日前释出了春夏系列，以 “Mischief & American Dream” 为主题，大玩恶搞风格和美式精神，将“I DON`T GIVE A F*CK”、“RICH OWNERS”、“自由国”、“美国鹰”等标语和图案印制于 Tee、背心、短裤之上，并大胆运用条纹、迷彩、拼接等设计元素，极具街头态度。据悉，所有新品将于近期上架 SSUR 上海门店和线上店铺，感兴趣的朋友不妨提前做好准备。
</div>
<div id="right">
<img src="10361578_222507517000_2.jpg" />
<img src="10361578_222507517000_2.jpg" />
<img src="10361578_222507517000_2.jpg" />
<img src="10361578_222507517000_2.jpg" />
</div>
</div>
</body>
</html>css——————————————————
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
padding: 20px;
}
#wrap,#left,#right,#main{
border: 1px solid #999;
padding: 20px;
}
#wrap{
overflow: auto;
background: #eee;
min-width: 600px;
margin: 0 auto;
}
#left{
float: left;
width: 200px;
background: #fff;
}
#right{
float: right;
width: 120px;
background: #fff;
}
#main{
margin-left: 220px;
margin-right: 140px ;
background: #fff;
}
展开
收起
1
条回答
写回答
写回答
-
码农|Coder| Pythonista<div id="wrap"> <div id="left"> <img src="10361578_222507517000_2.jpg" /> <p>Poi$on</p> </div> <div id="right"> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> <img src="10361578_222507517000_2.jpg" /> </div> <div id="main"> 美国街头品牌 SSUR 人气支线 SSUR*PLUS 日前释出了春夏系列，以 “Mischief & American Dream” 为主题，大玩恶搞风格和美式精神，将“I DON`T GIVE A F*CK”、“RICH OWNERS”、“自由国”、“美国鹰”等标语和图案印制于 Tee、背心、短裤之上，并大胆运用条纹、迷彩、拼接等设计元素，极具街头态度。据悉，所有新品将于近期上架 SSUR 上海门店和线上店铺，感兴趣的朋友不妨提前做好准备。 </div> </div>把main和right换个顺序就行了。
浏览器解析HTML文档是从上到下按顺序解析的，你原来的代码right本来就是一个block，设置右浮动不会对它前面的main有影响
2019-07-17 19:45:56赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
