一行有5列，第2、4列寬度150px，其他3列平均分配剩下的寬度：
思路：設定1、3、5寬度為33.33%-100px，3列的寬度就是99.99%-300px，再加上2、4列的寬度和300px，5列的寬度和≈100%，用這個思路可以應付各種複雜的自適應布局。
方法：但是寬度沒有33.33%-100px這種寫法，所以要用marging減少寬度，還要padding來減少自己內容寬度，避免內容與旁邊的重疊
注意：box-sizing:border-box;這個屬性是保證寬度不受padding影響
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>col
title
>
head
>
<
style
>
html,body
div.c2
.c4.c1,.c3,.c5
.c3,.c5
.c1style
>
<
body
>
<
div
class
="c1"
>111111111111111111111111111111111111111111111111
div>
<
div
class
="c2"
>2222222222222222222222222222
div>
<
div
class
="c3"
>333333333333333333333333333333333333333333333333
div>
<
div
class
="c4"
>4444444444444444444444444444
div>
<
div
class
="c5"
>555555555555555555555555555555555555555555555555
div>
body
>
html
>
左側固定寬度，右側自適應寬度的CSS布局
第一種方法 關於這個布局，作者是這樣說明的 left和right都貼住左側。設定left在right上面 z index 在right內加個放內容的層 content 設定content距離right的左側為200px，即剛巧等於left的寬度。這個布局有乙個缺點就是，如果我設定了foot的div，...
圓角自適應寬度按鈕的css實現
圓角自適應寬度按鈕的css實現 有時候我們需要乙個鏈結看上去像按鈕，所以就需要用到block屬性，如果要幾個按鈕併排或者需要和其他文字混排的時候，inline block就可以很好的解決這個問題。只是不是所有人都響應了mozilla的號召把firefox公升級到了3.0。遺憾的是，firefox2不...
Css實現自適應螢幕寬度的正方形
思路，正方形，長寬都一樣，需要找到乙個標準值然後再去設定盒子模型，可以用padding，margin,width height,正題開始 1.使用padding，原因，百分比是基於父元素的寬度，所以如果是根據父盒子的百分比來算，則可以使用這個方法 具體 如下 class square div squ...