1.两列布局
1.1左列定宽，右列自适应
- float + margin：左浮动，右margin-left：左侧宽度
缺点：左侧高度不会随右侧高度增加而增加
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
复制代码#left {
background-color: #f00;
float: left;
width: 100px;
}
#right {
background-color: #0f0;
margin-left: 100px; /*大于等于#left的宽度*/
}
复制代码- float + margin(fix)：左浮动，右父元素右浮动，margin-left：负左宽度，右子元素margin-left：左宽度
缺点：左侧高度不会随右侧高度增加而增加
<body>
<div id="left">左列定宽</div>
<div id="right-fix">
<div id="right">右列自适应</div>
</div>
</body>
复制代码#left {
background-color: #f00;
float: left;
width: 100px;
}
#right-fix {
float: right;
width: 100%;
margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
#right{
margin-left: 100px; /*大于或等于#left的宽度*/
background-color: #0f0;
}
复制代码- float + overflow：左浮动，右overflow:hidden
缺点：左侧高度不会随右侧高度增加而增加
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
复制代码#left {
background-color: #f00;
float: left;
width: 100px;
}
#right {
background-color: #0f0;
overflow: hidden; /*触发bfc达到自适应*/
}
复制代码- table：父display:table;子display: table-cell
优缺点：兼容性好，但不利于SEO，不过此种布局任意一个单元格高度增高时，其它的表格将同时增高，需要根据具体业务场景来选择此种布局。
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
复制代码#parent{
width: 100%;
display: table;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
background-color: #0f0;
}
#left,#right{
display: table-cell; /*利用单元格自动分配宽度*/
}
复制代码- 绝对定位：左top与left为0，右left:指定宽度，right:0
优缺点：它仍然和浮动布局一样，无法做到两边随着中间内容的增高而增高，并且浮动布局使其脱离了标准文档流，将会影响其后面的元素，后面的元素要脱离文档流或者设置margin-top值为它所占的高度才可保证布局不被定位的元素遮挡住。
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent{
position: relative; /*子绝父相*/
}
#left {
position: absolute;
top: 0;
left: 0;
background-color: #f00;
width: 100px;
}
#right {
position: absolute;
top: 0;
left: 100px; /*值大于等于#left的宽度*/
right: 0;
background-color: #0f0;
}
复制代码- flex：父display: flex，左定宽，右flex:1;
优缺点：兼容性不好，flex为CSS3新属性，对IE兼容性不好，对其它浏览器注意加上浏览器hack，此处省略了。不过，这种布局解决了中间内容增高时左右两边不随之增高的问题。
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent{
width: 100%;
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
flex: 1; /*均分了父元素剩余空间*/
background-color: #0f0;
}
复制代码- grid：父display:grid;再设置为2列
优缺点：网格布局是CSS3新属性，兼容性不太好，不过它左右两边可随中间内容增高而增高。
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*设定2列就ok了,auto换成1fr也行*/
}
#left {
background-color: #f00;
}
#right {
background-color: #0f0;
}
复制代码1.2 一列不定宽，一列自适应
- float + overflow：左浮动，右overflow:hidden;
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#left {
float: left; /*只设置浮动,不设宽度*/
height: 500px;
background-color: #f00;
}
#right {
overflow: hidden; /*触发bfc*/
height: 500px;
background-color: #0f0;
}
复制代码- flex：父display:flex;右flex: 1;
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent{
display: flex;
}
#left { /*不设宽度*/
background-color: #f00;
}
#right {
background-color: #0f0;
flex: 1; /*均分#parent剩余的部分*/
}
复制代码- grid：父display: grid;列设为auto 1fr;
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent{
display: grid;
grid-template-columns: auto 1fr; /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
}
#left {
background-color: #f00;
}
#right {
background-color: #0f0;
}
复制代码2.三列布局
2.1 两列定宽，一列自适应
- float + margin
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
min-width: 300px;
/*100+200,防止宽度不够,子元素换行*/
}
#left {
float: left;
width: 100px;
background-color: #f00;
}
#center {
float: left;
width: 200px;
background-color: #eeff2b;
}
#right {
margin-left: 300px;
/*等于#left和#center的宽度之和*/
background-color: pink;
}
复制代码- float + overflow
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
min-width: 300px;
/*100+200,防止宽度不够,子元素换行*/
}
#left {
float: left;
width: 100px;
background-color: #f00;
}
#center {
float: left;
width: 200px;
background-color: #eeff2b;
}
#right {
overflow: hidden;
/*触发bfc*/
background-color: pink;
}
复制代码- display: table
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
width: 100%;
display: table;
}
#left {
display: table-cell;
width: 100px;
background-color: #f00;
}
#center {
display: table-cell;
width: 200px;
background-color: #eeff2b;
}
#right {
display: table-cell;
background-color: pink;
}
复制代码- flex
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#center {
width: 200px;
background-color: #eeff2b;
}
#right {
flex: 1;
background-color: pink;
}
复制代码- grid
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
复制代码#parent {
display: grid;
grid-template-columns: 100px 200px auto;
/*设置3列,固定第一第二列的宽度,第三列auto或者1fr*/
}
#left {
background-color: #f00;
}
#center {
background-color: #eeff2b;
}
#right {
background-color: pink;
}
复制代码2.2 两侧定宽，中间自适应
- 双飞翼布局
<body>
<!--中间栏需要放在前面-->
<div id="parent">
<div id="center">
<div id="center_inbox">中间自适应</div>
</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#left {
float: left;
width: 100px;
height: 500px;
margin-left: -100%;
/*调整#left的位置,值等于自身宽度*/
background-color: #f00;
}
#center {
height: 500px;
float: left;
width: 100%;
background-color: #eeff2b;
}
#center_inbox {
margin: 0 200px 0 100px;
/*关键!!!左右边界等于左右盒子的宽度*/
}
#right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
/*使right到指定的位置,值等于自身宽度*/
background-color: #ffc0cb;
}
复制代码- 圣杯布局
<body>
<div id="parent">
<!--#center需要放在前面-->
<div id="center">中间自适应</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#parent {
height: 500px;
padding: 0 200px 0 100px;
/*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#left {
position: relative;
float: left;
width: 100px;
height: 500px;
margin-left: -100%;
left: -100px;
background-color: #f00;
}
#center {
position: relative;
float: left;
width: 100%;
height: 500px;
background-color: #eeff2b;
}
#right {
position: relative;
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
right: -200px;
background-color: pink;
}
复制代码- position布局
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间自适应</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#parent {
position: relative;
/*子绝父相*/
}
#left {
position: absolute;
top: 0;
left: 0;
width: 100px;
background-color: #f00;
}
#center {
margin-left: 100px;
/*大于等于#left的宽度,或者给#parent添加同样大小的padding-left*/
margin-right: 200px;
/*大于等于#right的宽度,或者给#parent添加同样大小的padding-right*/
background-color: #eeff2b;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: pink;
}
复制代码- table布局
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间自适应</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#parent {
width: 100%;
display: table;
}
#left {
display: table-cell;
width: 100px;
background-color: #f00;
}
#center {
display: table-cell;
background-color: #eeff2b;
}
#right {
display: table-cell;
width: 200px;
background-color: pink;
}
复制代码- flex布局
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间自适应</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#parent {
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#center {
flex: 1;
background-color: #eeff2b;
}
#right {
width: 200px;
background-color: pink;
}
复制代码- grid布局
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间自适应</div>
<div id="right">右列定宽</div>
</div>
</body>
复制代码#parent {
height: 500px;
display: grid;
grid-template-columns: 100px auto 200px;
}
#left {
width: 200px;
background-color: #f00;
}
#center {
background-color: #eeff2b;
}
#right {
width: 200px;
background-color: pink;
}
复制代码3. 等宽布局
九宫格
- table
<body>
<div id="parent">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="row">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
复制代码#parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: table;
}
.row {
display: table-row;
}
.item {
border: 1px solid #000;
display: table-cell;
}
复制代码- flex
<body>
<div id="parent">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="row">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
复制代码#parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex: 1;
}
.item {
flex: 1;
border: 1px solid #000;
}
复制代码- grid
<body>
<div id="parent">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
复制代码#parent {
width: 1200px;
height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
grid-template-rows: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
}
.item {
border: 1px solid #000;
}
复制代码4. 全屏布局，分上、左右、下
- position
<body>
<div id="parent">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
复制代码html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {
border: 1px solid #000;
}
#top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
}
#left {
position: absolute;
top: 100px; /*值大于等于#top的高度*/
left: 0;
bottom: 50px; /*值大于等于#bottom的高度*/
width: 200px;
}
#right {
position: absolute;
overflow: auto;
left: 200px; /*值大于等于#left的宽度*/
right: 0;
top: 100px; /*值大于等于#top的高度*/
bottom: 50px; /*值大于等于#bottom的高度*/
}
#bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
}
复制代码- flex
<body>
<div id="parent">
<div id="top">top</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="bottom">bottom</div>
</div>
</body>
复制代码*{padding:0;margin:0;}
html,
body,
#parent {
height: 100%;
}
#parent {
display: flex;
flex-direction: column;
}
#top {
height: 100px;
background: grey;
}
#bottom {
height: 50px;
background: grey;
}
#middle {
flex: 1;
display: flex;
}
#left {
width: 200px;
background: yellow;
}
#right {
flex: 1;
overflow: auto;
background: pink;
}
复制代码- grid
<body>
<div id="parent">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
复制代码html,
body,
#parent {
height: 100%;
}
#parent {
width: 100%;
height: 100%;
display: grid;
/*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
grid-template-columns: 200px 1fr;
/*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
grid-template-rows: 100px auto 50px;
/*定义网格区域分布*/
grid-template-areas:
"header header"
"aside main"
"footer footer";
}
#parent>div {
border: 1px solid #000;
}
#top {
grid-area: header;/*指定在哪个网格区域*/
}
#left {
grid-area: aside;
}
#right {
grid-area: main;
}
#bottom {
grid-area: footer;
}
复制代码5. 利用padding实现左右内容不一样高时，高度以最高的为准
<div class="box">
<div class="child-orange">左</div>
<div class="child-green">
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
</div>
</div>
.box{
overflow: hidden;
resize: vertical;
}
.child-orange,
.child-green{
margin-bottom: -600px;
padding-bottom: 600px;
width: 300px;
}
.child-orange{
float: left;
background: orange;
}
.child-green{
float: left;
background: green;
}
复制代码6. 页面高度不够时，footer一直在最底层，超过高度时跟随页面
- padding
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.8 arial;
}
html,
body,
.wrap {
height: 100%;
}
.wrap {
height: auto;
min-height: 100%;
background: #CCC;
color: #fff;
font-size: 18px;
text-align: center;
}
.main {
padding-bottom: 80px;
}
.footer {
height: 80px;
line-height: 80px;
margin-top: -80px;
background: #333;
color: #fff;
font-size: 16px;
text-align: center;
}
复制代码<body>
<div class="wrap">
<div class="main">
<h1>七七事变祭</h1>
<p>中华民族创辉煌，</p>
<p>倭寇菲佣心中慌。</p>
<p>为虎作伥傍老美，</p>
<p>东海南海滋事狂。</p>
<br />
<p>历史潮流不可挡，</p>
<p>中华儿女当自强。</p>
<p>警钟长鸣记国耻，</p>
<p>发展经济强国防。</p>
<br />
<p>七七事变 77 周年，勿忘国耻，振兴中华！！！</p>
<br />
</div>
</div>
<div class="footer">
<h1>页面高度不满，底部固定</h1>
</div>
</body>
复制代码- 使用flex
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
background: red;
min-height: 100px;
}
.content {
background: blue;
flex: 1;
}
footer {
background: green;
min-height: 100px;
}
复制代码<body class="main">
<header></header>
<div class="content"></div>
<footer></footer>
</body>
复制代码7. CSS实现高度随宽度变化
- padding-bottom
.parent {
width: 20%;
padding-bottom: 20%;/*纵横比：高度/宽度*100%*/
height: 0;
background: yellow;
position: relative;
}
.child{
width: 100%;
height: 100%;
position: absolute;
}
复制代码<div class="parent">
<div class="child">child</div>
</div>
复制代码- vw
div {
width: 20vw;
height: 20vw;
}
复制代码
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
