两栏布局(左边宽度固定,右边自适应)
1、左边float:left;右边overflow:hidden
<template>
<div>
<div class="cantainer">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</template>
<style>
.left {
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right {
height: 500px;
background-color: skyblue;
overflow: hidden;
}
</style>
2、左边浮动float:left;右边盒子的margin-left:左边盒子的宽度
<template>
<div>
<div class="cantainer">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</template>
<style>
.left {
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right {
height: 500px;
background-color: skyblue;
margin-left: 200px;
}
</style>
三栏布局(左右两边固定200px,中间自适应)
1、定位法
将父元素设置为position:relative.
左边元素:position:absolute;
left:0;
top:0;
右边元素:positon:absolute;
right:0;
top:0;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度
2、浮动法
将左边元素设置为左浮动:float:left;
将右边元素设置为右浮动:float:right;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.
中间元素会自动居中
注意的是:html中,中间元素必须写在最后!否则不能居中