开发者社区> 问答> 正文

用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;
}

展开
收起
杨冬芳 2016-06-23 09:10:50 2202 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
AMAP INSIDE 智能定位带来的时代新机会——互联网世界底图 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载