兩列自適應布局

要求：

1、兩個盒子在同一行

2、右邊的盒子需要佔滿剩下的空間

3、兩個盒子不能重疊

方式一：左側欄寬度不固定

兩列自適應布局title>

* html,body

#wrap

#header

.container

/*父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題*/

.clearfix

:after

.sidebox

.mainbox

#footer

style>

head>

id="wrap">

id="header">頭部資訊div>

class="container clearfix">

class="mainbox">

主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域

div>

class="sidebox">

側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄

div>

id="footer">底部資訊div>

body>

html>方式二：左側欄寬度固定

兩列自適應布局title>

* #header

.container

/*父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題*/

.clearfix

:after

.mainbox

.mainboxcontent

.sidebox

#footer

style>

head>

id="header">頭部資訊div>

class="container clearfix">

class="mainbox">

class="mainboxcontent">

主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域主要內容區域

div>

class="sidebox">

側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄側邊欄

div>

id="footer">底部資訊div>

body>

html>

兩列布局兩列寬度均自適應）

公司專案需要使用兩列布局，要求左右列寬度自適應，左列高度隨著內容自動出現滾動條，網上的方案有很多種，研究了一下採用float bfc的解決方案。最終實現效果如圖原理浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量佔滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。若浮動元素的塊狀兄弟元素為bfc，則不...

兩列布局三列適應布局兩列等高適應布局。

一.兩列布局左側定寬右側自適應。四種方法 flex position float和負外邊距外邊距 1.使用flex.右側自適應區塊左側定寬200px區塊 2.使用position，考慮了頁面優化，右側區域先載入。右側自適應區塊左側定寬200px區塊 3.利用float和負外邊距這裡的10...

多列自適應布局

多列布局是從兩列布局引申出來的，所以我們先來看兩列布局 html結構如下所示 class parent class left leftp div class right r leftp r rightp div div 這裡的left是定寬，right自適應 left right 我們需要變動一下上...

兩列自適應布局

兩列布局 兩列寬度均自適應）

兩列布局 三列適應布局 兩列等高適應布局。

多列自適應布局

相關推薦

兩列布局兩列寬度均自適應）

兩列布局三列適應布局兩列等高適應布局。