今天做了乙個練習,要求用兩種方法來實現左側寬度固定、右側寬度自適應的兩列布局。一開始我以為會很簡單,畢竟只是練習,但是我寫出了一種方法之後卻沒能順利的寫出第二種方法。對於網上的一些解決方法我還是不太滿意,於是自己繼續琢磨著,問問一些前輩,希望得到一些思路。終於,皇天不負有心人,在自己翻譯的一篇關於bfc的文章上,我找到了解決的方法。
關於左側寬度固定,右側寬度自適應兩列布局
的一種很常用的方法我相信大家都知道。就是利用
左側元素
浮動,或者絕對定位的方式使其
脫離常規文件流,讓兩個塊級元素能夠在同一行顯示。然後右側元素 margin-left 的值等於左側元素寬度,這時右側元素將緊挨著左側元素,由於塊元素的寬度會自動預設充滿剩下的螢幕,所以就實現了右側自適應的效果了。
html**如下:
doctypecss**如下:>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
link
rel="stylesheet"
href
="test.css"
type
="text/css"
>
head
>
<
body
>
<
div
class
="one"
>
div>
<
div
class
="two"
>第一種方法
div>
body
>
html
>
.one .two瀏覽器上輸出效果:
第二種方法,我利用的是建立乙個新的bfc(塊級格式化上下文)來防止文字環繞的原理來實現的。bfc就是乙個相對獨立的布局環境,它內部元素的布局不受外面布局的影響。它可以通過以下任何一種方式來建立:
關於bfc,在w3c裡是這樣描述的:在bfc中,每個盒子的左外邊框緊挨著包含塊
的左邊框
(從右到左的格式化時,則為右邊框緊挨)。即使在浮動裡也是這樣的(儘管乙個包含塊的邊框會因為浮動而萎縮),除非這個包含塊的內部建立了乙個新的bfc。這樣,當我們給右側的元素單獨建立乙個bfc時,它將不會緊貼在包含塊的左邊框,而是緊貼在左元素的右邊框。
html**:
doctypecss**:>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
link
rel="stylesheet"
href
="test.css"
type
="text/css"
>
head
>
<
body
>
<
div
class
="one"
>
div>
<
div
class
="two"
>第二種方法
div>
body
>
html
>
.one .two瀏覽器輸出效果:
以上僅是個人一些
左側寬度固定,右側寬度自適應
實現左側寬度固定,右側寬度自適應的布局有很多,這裡介紹幾種方式 方式一 左側盒子寬度設定為100畫素,並且設定為左浮動,右側的盒子不設定寬度,只是設定個margin left值就可以了,如下 左側右側 但是以上辦法,如果設定為右側,固定左側自適應的布局是不可以的,如果想實現這樣的布局可以設定把兩個盒...
左側固定寬度,右側自適應寬度的CSS布局
第一種方法 關於這個布局,作者是這樣說明的 left和right都貼住左側。設定left在right上面 z index 在right內加個放內容的層 content 設定content距離right的左側為200px,即剛巧等於left的寬度。這個布局有乙個缺點就是,如果我設定了foot的div,...
CSS 實現兩欄布局,左側固定寬度,右側自適應
1 flex 實現 doctype html 實現兩欄布局 title html,body content left right content div style head content left 這是第乙個div div right 這是第二個div div div body html 2 f...