元素倆端對(duì)齊的排列布局在實(shí)際的開(kāi)發(fā)當(dāng)中隨處可見(jiàn)，使用flex布局的--justify-content ： space-between即可輕松實(shí)現(xiàn)，但有些場(chǎng)景下需要考慮兼容等問(wèn)題，不得不放棄flex布局，所以我們想要實(shí)現(xiàn)同樣的效果就需要研究排版，在網(wǎng)絡(luò)搜索了一番答案后，發(fā)現(xiàn)真正簡(jiǎn)單且實(shí)質(zhì)性能夠解決問(wèn)題的，寥寥無(wú)幾，確實(shí)我在實(shí)際項(xiàng)目中經(jīng)常碰到此類(lèi)布局，所以我利用業(yè)余時(shí)間，將其原理實(shí)現(xiàn)分享于此，以供交流，分享

場(chǎng)景要求

在一個(gè)確定寬度的盒子內(nèi)，將item倆端對(duì)齊排列，且不影響確定盒子的原來(lái)布局。

<div class="container">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

假設(shè)這里我們有這么些item

* {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 1200px;
        height: 500px;
        background-color: aqua;
        margin: 0 auto;
    }
    
    ul {
        /* 關(guān)鍵是元素的寬，通過(guò)margin負(fù)值移位與container重疊 */
        width: 1220px;
        margin-left: -20px;
        list-style: none;
    }
    
    ul li {
        float: left;
        /* width = (盒子寬度 - margin間距 * 一行items的個(gè)數(shù) - 1) /  一行item的個(gè)數(shù) */
        /* (1200px - 20 * 2) / 3 */
        width: 386.666px;
        height: 60px;
        margin: 0px 0 20px 20px;
        background-color: red;
    }

css關(guān)鍵在于需要我們計(jì)算下item的寬度，/* width = (盒子寬度 - margin間距 * 一行items的個(gè)數(shù) - 1) /  一行item的個(gè)數(shù) */ ，這里我打算一行顯示三個(gè)item,那么就是(1200px - 20 * 2) / 3，為什么是一行item的個(gè)數(shù)-1來(lái)計(jì)算marign占據(jù)的寬度，三個(gè)item不應(yīng)該是三個(gè)margin嗎，這就是實(shí)現(xiàn)倆端對(duì)齊的精髓所在，試想浮動(dòng)布局，一行元素在流上逐個(gè)排列，當(dāng)流方向?qū)挾炔粔驎r(shí)，元素則會(huì)折行排列，如果想讓齊在一行內(nèi)顯示，我們確實(shí)可以通過(guò)給第三個(gè)item的margin值設(shè)置為0，使其不折行也達(dá)到了倆端對(duì)齊的顯示方式，這樣做確實(shí)沒(méi)問(wèn)題，可一旦item個(gè)數(shù)多了，且不確定的時(shí)候呢，你怎么取消一行內(nèi)最后一個(gè)item的margin,顯然設(shè)置margin為0的方式不是最佳方案，那么此時(shí)就可以對(duì)他的外包盒子做處理，外部盒子ul(這里我使用的是ul標(biāo)簽，塊標(biāo)簽都可以)的寬度和 -margin值的設(shè)置。

為什么外部盒子的寬度是1220px

這是container原來(lái)的寬度

這是ul的寬度，是的已經(jīng)大過(guò)了container,而且是右邊大過(guò)去的，那此時(shí)將ul用-margin處理后，即可成為視覺(jué)上的倆端對(duì)齊

取消ul的背景顏色后，效果達(dá)成

總結(jié)

到此這篇關(guān)于CSS實(shí)現(xiàn)多個(gè)元素在盒子內(nèi)兩端對(duì)齊效果的文章就介紹到這了,更多相關(guān)CSS 元素 盒子 兩端對(duì)齊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論