兩欄布局與三欄布局

一、兩欄布局

="left"

>左邊定寬<
/div>
="right"
>右邊自適應,前端前端前端前端前端前端前端前端前端前端<
/div>

.left

.right

.left

.right

.left

.right

="container"

>
="middle"
>
中間<
/div>
="left"
>
左側<
/div>
="right"
>
右側<
/div>
<
/div>
="footer"
>
尾部<
/div>

.container 

.right 
.left 
.right 
.middle

將父元素設定為position:relative.

左邊元素:position:absolute;
left:0;
top:0;
右邊元素:positon:absolute;
right:0;
top:0;
中間元素:margin-left:左邊元素的寬度;
margin-right:右邊元素的寬度

將左邊元素設定為左浮動:float:left;

將右邊元素設定為右浮動:float:right;
中間元素:margin-left:左邊元素的寬度;
margin-right:右邊元素的寬度.
中間元素會自動居中
注意的是:html中,中間元素必須寫在最後！否則不能居中

="main"
>
="content"
>
<
/div>
(content包含在main中)
<
/div>
="left"
>
<
/div>
="right"
>
<
/div>
<
/body>
.main 
.content 
.left
.right
<
/style>

三欄布局與兩欄布局

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...