兩種方式實現父布局中兩列布局的自適應

2021-07-31 15:51:13 字數 430 閱讀 2037

自適應寬度是很多網頁都具備的特性,因為實現自適應能讓使用者在改變瀏覽器視窗大小的同時,仍然可以看到原來版式的布局,並不會因為瀏覽器視窗的大小而讓版面失去了原來設計的布局。

我們今天討論的是如果父布局的寬度固定,然後父布局內分成兩列,怎樣讓這兩列實現自適應布局。下面我們來看看如何實現這種自適應的效果。先來看看下列的**:

無標題文件left

right

left

right

我使用了兩種方式來實現這一效果。

首先兩種方式都有乙個父元素,為的是讓兩列布局在乙個固定的布局中,並且這個固定的布局是居中的。然後讓兩列布局自適應寬度。

最後效果圖是:

多種方式實現兩列布局

兩列布局使我們再做頁面的時候用的最多的布局方式,也是設計稿種最常見的一種布局型別,一般分為 一列固定寬度另一列自適應寬度,兩列自適應寬度,兩列相同高度等形式 這篇文章將詳細介紹各種兩列布局的實現方式 說起 布局是在css3之前相容性最好的一種布局方式,使用 做兩列自適應寬度或者高度布局能夠在ie6瀏...

移動端兩種布局方式

rem media less是我們移動端布局的第一種方案。移動端頁面設計稿尺寸 安卓手機尺寸 320px 360px 375px 384px 400px 414px 500px 720px 蘋果手機尺寸 640px 750px 通過less rem media 技術完成頁面在各個手機尺寸上的顯示 手...

HTML網頁布局的兩種方式

網頁布局兩種方式 浮動布局 定位布局 1.浮動布局 float left right none 注意 設定浮動之後,元素會脫離文件流,飄起來。塊級元素設定浮動,失去獨佔一行的特性。浮動元素會受 父級 元素的擠壓,可能擠到下一行去。自動擴充套件大盒子高度 1.盒子塌陷 大盒子不設定高度,小盒子又全部浮...