這篇文章主要介紹了css布局如何實現兩端布局，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網頁空間、營銷軟件、網站建設、武川網站維護、網站推廣。

最近在進行開發的過程中，有遇到兩端對齊的布局，是按照百分比來進行布局的，之前有用過flex布局，但是flex布局，使用兩端布局的時候，會出現一切bug。比如，下面的是動態生成的時候，三列或者多列就會把下面的列表分布在兩邊。
雖然可以解決，但是還是想看一下用普通的css是如何布局的。因為就寫了這個。

在網上找了一些教程，都是寫死的寬度來進行操作的。我把它改造成了百分比的格式，簡單來記錄一下。
先上css

<style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        .max-box {
            max-width: 1200px;
            margin: 0px auto;
        }
        
        .box {
            overflow: hidden;
            width: calc(100% + 20px);
            margin-left: -10px;
        }
        
        .inner {
            height: 100px;
            border: solid 1px red;
            float: left;
            margin-left: 10px;
            width: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            max-width: 1200px;
            margin: 50px auto;
            border: solid 1px red;
            height: 200px;
        }
    </style>

再上html

 <div class="max-box2">

    </div>
    <div class="max-box">
        <div class="box">
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
        </div>
    </div>

把這些套入到html就可以看到效果了。
如下圖

最后總結一下那個公式

x = 10px; 即：想要的間距
y = 4     即：想要排列的個數
父級：  width: calc(100% + (x * 2));
子級：  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css布局如何實現兩端布局”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

本文名稱：css布局如何實現兩端布局-創新互聯
網頁URL：http://vcdvsql.cn/article44/csihhe.html

成都網站建設公司_創新互聯，為您提供網站收錄、關鍵詞優化、響應式網站、動態網站、外貿網站建設、商城網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯