常見布局
兩欄布局（左邊寬度固定200px，右邊自適應）
1、左邊float：left；右邊margin-left：左邊盒子的寬度
>
.container
.left
.right
style
>
class
="cantainer"
>
class
="left"
>
div>
class
="right"
>
div>
div>
>
.container
.left
.right
style
>
class
="cantainer"
>
class
="left"
>
div>
class
="right"
>
111div
>
div>
>
*.container
.left
.right
style
>
class
="cantainer"
>
class
="left"
>
div>
class
="right"
>
111div
>
div>
>
*.container
.left
.right
style
>
class
="container"
>
class
="left"
>
div>
class
="right"
>
div>
div>
>
*.container
.left
.right
style
>
class
="container"
>
class
="left"
>
div>
class
="right"
>
div>
div>
1、聖杯布局
首先給父盒子新增padding-left和padding-right，留出左右兩塊位置，中間盒子設定寬度百分之百，然後讓左中右三個盒子浮動使其在一行，此時可以看到center在上，left和right在下，然後給左邊盒子設定margin-left: -100%;
再利用position：relative;相對定位，right: 左邊盒子寬度；使其到達最終的位置，右邊盒子只需設定margin-right: -右邊盒子的寬度即可。
>
*.container
.left
.right
.center
style
>
class
="container"
>
class
="center"
>
div>
class
="left"
>
div>
class
="right"
>
div>
div>
>
*.container
.left
.right
.center
style
>
class
="container"
>
class
="center"
>
div>
div>
class
="left"
>
div>
class
="right"
>
div>
>
*.left
.right
.center
style
>
class
="container"
>
class
="left"
>
div>
class
="right"
>
div>
class
="center"
>
div>
div>
>
*.container
.left
.right
.center
style
>
class
="container"
>
class
="left"
>
div>
class
="right"
>
div>
class
="center"
>
div>
div>
>
*.container
.left
.center
.right
style
>
class
="container"
>
class
="left"
>
div>
class
="center"
>
div>
class
="right"
>
div>
div>
>
*.container
.left
.center
.right
style
>
class
="container"
>
class
="left"
>
div>
class
="center"
>
div>
class
="right"
>
div>
div>
>
*.container
.left
.center
.right
style
>
class
="container"
>
class
="left"
>
div>
class
="center"
>
div>
class
="right"
>
div>
div>
三欄布局與兩欄布局
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...