小編給大家分享一下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如何實現兩欄固定中間自適應”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。