两栏布局
左边盒子定宽度右边盒子自适应
【浮动➕ marin实现】
<div class="twoContain">
<div class="twoContainSonLeft">twoContainSonLeft</div>
<div class="twoContainSonRight">twoContainSonRight</div>
</div>
.twoContain {
height: 300px;
}
/* 左边盒子定宽右边自适应
*/
.twoContain .twoContainSonLeft {
width: 300px;
background-color: yellowgreen;
float: left;
height: 100%;
}
.twoContain .twoContainSonRight {
margin-left: 300px;
background-color: blue;
}
用flex布局也可以实现两栏布局
.twoContain {
height: 300px;
display: flex;
}
.twoContain .twoContainSonLeft {
width: 300px;
background-color: yellowgreen;
height: 100%;
}
.twoContain .twoContainSonRight {
flex: 1;
background-color: blue;
}
浮动+BFC实现两栏布局
.twoContain {
height: 300px;
}
.twoContainSonLeft {
float: left;
/* 定宽 */
width: 200px;
height: 100%;
background-color: chartreuse;
}
.twoContainSonRight {
/* 不设置宽度自适应 */
height: 100%;
/*触发BFC条件*/
overflow: hidden;
background-color: coral;
}
左边盒子不定宽度右边盒子自适应
浮动+BFC实现两栏布局
原理:给正常元素添加BFC属性,正常元素就不会被遮挡,且环绕浮动元素排开
.twoContain {
height: 300px;
}
.twoContainSonLeft {
float: left;
/* 不定宽 */
height: 100%;
background-color: chartreuse;
}
.twoContainSonRight {
/* 不设置宽度自适应 */
height: 100%;
/*触发BFC条件*/
overflow: hidden;
background-color: coral;
}
一波小总结:以上脱离文档流的方式(如浮动、定位),他们的大体思路都是: 先让左定宽元素脱离文档流,这样可以右列正常能够与左列脱离文档流的元素“站成一排”,此时左列元素还覆盖着右列元素,最后,我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成啦~
用flex布局也可以实现两栏布局
.twoContain {
height: 300px;
display: flex;
}
.twoContain .twoContainSonLeft {
background-color: yellowgreen;
height: 100%;
}
.twoContain .twoContainSonRight {
flex: 1;
background-color: blue;
}
三栏布局
三栏布局的效果就是左边盒子固定宽度,右边盒子固定宽度,中间盒子自适应
方法一触发BFC
<div class="threeContain">
<div class="threeContainSonLeft">threeContainSonLeft</div>
<div class="threeContainSonRight">threeContainSonRight</div>
<div class="threeContainSonMiddle">threeContainSonMiddle</div>
</div>
.threeContain{
}
.threeContainSonLeft{
width: 200px;
float: left;
background-color: red;
}
.threeContainSonMiddle{
background-color: blue;
overflow: hidden;
}
.threeContainSonRight{
width: 200px;
float: right;
background-color: green;
}
原理:让左右两边盒子分别左右浮动,然后中间盒子的div写在左右两个盒子下面然后通过overflow去触发BFC让盒子围绕脱离文档流的元素排列。
方法二让中间盒子使用margin-left和margin-right去处理
.threeContain{
}
.threeContainSonLeft{
width: 200px;
float: left;
background-color: red;
}
.threeContainSonMiddle{
background-color: blue;
margin-left: 200px;
margin-right: 200px;
}
.threeContainSonRight{
width: 200px;
float: right;
background-color: green;
}
通过flex布局实现三栏布局
<div class="threeContain">
<div class="threeContainSonLeft">threeContainSonLeft</div>
<div class="threeContainSonMiddle">threeContainSonMiddle</div>
<div class="threeContainSonRight">threeContainSonRight</div>
</div>
.threeContain{
display: flex;
}
.threeContainSonLeft{
width: 200px;
background-color: red;
}
.threeContainSonMiddle{
background-color: blue;
flex: 1;
}
.threeContainSonRight{
width: 200px;
background-color: green;
}
通过定位实现三栏布局【两栏布局也可以用定位】
注意div的盒子顺序
<div class="threeContain">
<div class="threeContainSonLeft">threeContainSonLeft</div>
<div class="threeContainSonRight">threeContainSonRight</div>
<div class="threeContainSonMiddle">threeContainSonMiddle</div>
</div>
.threeContain{
position: relative;
}
.threeContainSonLeft{
position: absolute;
left: 0;
width: 200px;
background-color: red;
}
.threeContainSonMiddle{
background-color: blue;
margin-left: 200px;
margin-right: 200px;
}
.threeContainSonRight{
position: absolute;
right: 0;
width: 200px;
background-color: green;
}