简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - CSS 三列等高布局的疑问 margin负补偿
PHP中文网
PHP中文网 2017-04-17 13:11:34
0
2
828

主要疑惑是main、left、right三个元素放置顺序的问题

先贴代码：

<body>
    <p class="out">
        <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut!</p>
        
        <p class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus rem laudantium nam, temporibus sit cumque, asperiores eveniet praesentium omnis vero saepe dicta. Possimus facere ipsum, voluptas aliquid illo veniam?</p>

        <p class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea hic quaerat neque reprehenderit doloremque minima architecto, ipsa sed temporibus recusandae vitae impedit cum pariatur aspernatur similique dolorem libero a minus eveniet dolor sapiente! Illo minus dicta est! Accusantium, assumenda amet unde beatae cumque molestias. Numquam aut laudantium fugit, similique tempora minima vitae veniam obcaecati dolor, nihil rerum enim! Accusamus soluta facilis nihil, maiores eos esse quo dignissimos, nisi illo molestias aliquam, beatae quibusdam. Similique nesciunt velit eius aut aperiam est temporibus voluptatem ullam omnis, recusandae rerum vel incidunt nihil, voluptatum excepturi, accusamus ducimus totam quasi? Minima maxime tempore labore.</p>
        
    </p>
</body>

body{
    margin: 0;
    overflow: hidden;
}
.out{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.main{
    margin: 0 210px;
    background-color: lightgreen;
}
.left{
    width: 200px;
    float: left;
    background-color: pink;
}
.right{
    width: 200px;
    float: right;
    background-color: pink;
}
.main,.left,.right{
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

按照left、right、main的顺序

按照left、main、right的顺序

按照main、left、right的顺序

无法理解为什么会存在这样三种情况。。。

http://www.cnblogs.com/xiaohuochai/p/5314289.html?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&plg_usr=1&plg_vkey=1&plg_dev=1

原贴中三列等高布局的CSS写法，main本来就不浮动的，关键在于margin-bottom 和padding-bottom负补偿。
回答问题前看清楚问题行不 :(

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(2)
巴扎黑
巴扎黑2017-04-17 13:13:34 2樓

先理解一點float 會將元素會變成inline-block，並在一排顯示
所以：
按照left、right、main的順序：
left，right 變成一行了，然後main加入，剛好成一行
而按照left、main、right的順序：
left，main的時候，因為main是一個p，block元素獨佔一行，所以換行了。
依main、left、right的順序：
同上

點贊 +0
新增回覆
PHPzhong
PHPzhong2017-04-17 13:13:34 1樓

其實這個呢，就是浮動的一些原理，跟margin負補償沒什麼很大的關係。建議樓主去研究下浮動的原理，這裡面一兩句話說不清楚。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！