溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何實現兩欄固定中間自適應

發布時間:2021-03-19 09:48:12 來源:億速云 閱讀:215 作者:小新 欄目:web開發

小編給大家分享一下css如何實現兩欄固定中間自適應,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

1、利用絕對定位和margin

此方法的原理說將左右兩側進行定位,讓其脫離文檔流。 中心區域自然流動到它們下面,再為其設置margin值

此方法頁面元素結構可以順序可以隨意變動,注意top值需要進行處理,不然可能會出現對不齊現象

HTML

<div id='container'>
    <div class='left'>左側</div>
    <div class='center'>中間</div>
    <div class='right'>右側</div>
</div>

CSS

#container {
    position: relative;
}
.left, .right{
    position: absolute;
    top: 0;
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0px 210px;
    min-height: 500px;
    background-color: yellow;
}

2、利用浮動和margin

此方法的原理說將左右兩側進行float 浮動讓其脫離文檔流,中心部分處于正常文檔流,再為其設置margin值

此方法一定要將center中間部分放到最后,當窗口特別小時右側會被擠下來

HTML

<div id='container'>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
    <div class='center'>中間</div>
</div>

CSS

#container {
    position: relative;
}
.left, .right {
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}

3、圣杯布局

此方法最常見,三者相互關聯,最穩健。

首先需要將中間部分放再最前面,外面用一層容器包裹。外層容器讓其占滿整個屏幕100%, 左中右三者都float: left。 將center左右margin設置為兩邊容器的寬度加上邊距,將left左側margin-left設置為-100%,讓其出現在最左側,將right右側margin-right設置為-200px,讓其出現在最右側。

HTML

<div id='container'>
    <div class='center_wrap'>
        <div class='center'>中間</div>
    </div>
    <div class='left'>左側</div>
    <div class='right'>右側</div>
</div>

CSS

#container {
    position: relative;
}
.center_wrap, .left, .right{
    float: left;
    min-height: 500px;
}
.center_wrap {
    width: 100%;
}
.center_wrap .center{
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}
.left, .right {
    width: 200px;
    background-color: red;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

4、CSS3 flex

HTML

<div id='container'>
    <div class='left'>左側</div>
    <div class='center'>中間</div>
    <div class='right'>右側</div>
</div>

CSS

#container {
    width: 100%;
    display: flex;
}
.left, .right {
    width: 200px;
    background-color: red;
    min-height: 500px;
}
.center {
    flex: 1;
    min-height: 500px;
    margin: 0 10px;
    background-color: yellow;
}

以上是“css如何實現兩欄固定中間自適應”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女