CSS三欄布局

2021-07-03 00:26:46 字數 943 閱讀 6911

有這樣一種情況，在兩列布局的基礎上，將列的數量改為三欄。其中左右兩列的寬度固定，中間部分的寬度隨著瀏覽器寬度變化而變化。

首先，我們還是介紹一下傳統的方法，就是利用了margin取負值的技巧。

**如下：

三列布局


middle


left


right
css**如下：

.margin-left--1 


.margin-left--300 


.body 


.relative 


.left-300 


.right-300
分析可以得出，未設定margin-left時，三個div效果如下：

通過設定左div的margin-left為-100%後，左div就向上移動到了中間div的左邊，再設定右div的margin-left為負的右div寬度，就可以得到如下效果：

這個時候看似完成了，其實是不對的，因為左右兩個div其實是擋在了中間div的前面。所以還需要將三個div的父親div設定如下：

.body
再設定左右的相對位置即可。

當然，同樣可以使用css3的盒布局方式來完成該布局，和兩列布局一樣，都利用了box-flex屬性，**如下：

三列布局盒布局版
css**為：

.box 


.flex
完整**位置如下：

CSS布局 三欄布局

題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...

CSS布局 三欄布局

css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...

CSS三欄布局

一 前言 在之前的文章中，我曾經寫到過css兩欄布局 今天，我利用相同的思路來實現三欄布局。所謂的三欄布局，一般指的是 左右側定寬，中間部分自適應 在這篇文章中，我們將採用5種方式來實現三欄布局。在這裡我們假設已經對所有元素設定了 margin 0 padding 0 二 布局方式 1.positi...