左右兩欄布局寫法

2021-08-14 04:31:35 字數 522 閱讀 9656

我們常常在乙個網頁中會看到兩欄布局,如小公尺官網:

實現這樣的布局,我們可能會有如下方法:

新建乙個html頁面,結構如下:

class="list">

列表1li>

列表2li>

列表3li>

列表4li>

ul>

div>

class="context">

內容內容

div>

div>左右布局中,一般情況是左邊寬度固定,右邊寬度自適應。

.list

.context

.list

.context

.list

.context

總結:布局實現方法多種多樣,選擇那一種當然是仁者見仁,智者見智了,但是相容問題也不能忽視,前一種相容會好一些。

三欄布局與兩欄布局

html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...

兩欄布局和三欄布局

這篇文章中主要將自己學到的兩欄布局和三欄布局的方法總結一下 兩欄布局,左側固定,右側自適應 結構 css樣式 left right如果是右側固定,左側自適應呢?html css right left注意 1 哪側固定哪個div就寫在上邊,不能顛倒順序 2 除了用float浮動外,還可以用定位的方式,...

兩欄布局和三欄布局

class class left 我是文字測試君div class right 我是文字測試君div div 給固定寬度的一方設定浮動,給自適應的一方設定100 寬度值,用浮動控制左右寬固固定或自適應 left right style ie8及以下不支援 如果是左側固定右側自適應,給父級positi...