首页 > 用float进行三栏布局为什么最后一栏会下沉?

用float进行三栏布局为什么最后一栏会下沉?

html——————————————————

<!DOCTYPE html>
<html>
    <head>
        <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;
}

如图。
新手求指点


        <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有影响


因为屏幕宽度不够平铺这么多

【热门文章】
【热门文章】