首页 » CSS » CSS布局——三栏布局

CSS布局——三栏布局

原文 http://blog.csdn.net/u012194956/article/details/79090629

2018-01-19 02:00:09阅读(254)

题外话:抓狂系列片之叁个我。

三栏布局要求说明:两边固定宽度,中间自适应,顶部对齐

HTML文档结构有三种(内层div顺序不同):左右中、左中右。

实现效果:

<a href=CSS布局——三栏布局" src="http://img.blog.csdn.net/20180118092649803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjE5NDk1Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

方法如下:

1.左右中:对左右子元素使用了浮动属性(float),从而脱离了文档流,如果按照正常左中右的顺序,会导致右子元素出现在中间子元素的右下方。所以,浮动元素应该尽可能高的放置。

<div class="outer">
    <div class="inner left">left</div>
    <div class="inner right">right</div>
    <div class="inner middle">middle</div>
</div>

利用float属性,左子元素float设置为left,右子元素float设置为right,中间子元素设置margin-left为左子元素width,margin-right为右子元素width。(后附BFC说明)

.outer{
	overflow:hidden; /*生成BFC->将子元素中的浮动元素(float)的高度考虑进去*/
	background:#DCDCDC; /*灰*/
}
.left{
	width:200px;
	height:400px;
	float:left;
	background:#FF0000; /*红*/
}
.middle{
	height:100px; /*指定高度有效,设置百分比无效,若无此行,高度自适应*/
	margin-left:200px; /*左子元素宽度*/
	margin-right:300px; /*右子元素宽度*/
	background:#00FF00; /*绿*/
}
.right{
	width:300px;
	height:300px;
	float:right;
	background:#0000FF; /*蓝*/
}

2.左中右:设置属性display:flex (后附flex属性值说明)

<div class="outer">
    <div class="inner left">left</div>
    <div class="inner middle">middle</div>
    <div class="inner right">right</div>
</div>
设置父元素的display属性为flex,其内容两端对齐。指定子元素的高度以撑起容器,中间子元素宽度设置为100%。
.outer{
	display:flex;
	justify-content:space-between; /*子元素内容两端对齐*/
	background:#DCDCDC;
}
.left{
	width:200px;
	height:400px;
	background:#FF0000;
}
.middle{
	width:100%; /*宽度*/
	height:100px; 
	background:#00FF00;
}
.right{
	width:300px;
	height:300px;
	background:#0000FF;
}

附:

1.BFC(Block Formatting Context,块级格式化上下文):简单来说,BFC决定了元素对其内容的定位,以及与其他元素的关系和相互作用。再简言之,BFC内部的元素和外部的元素不会相互影响。

能够触发BFC的条件:

浮动元素,float(不为none)绝对定位元素,position(absolute,fixed)display(inline-block,table-cell,table-caption)overflow(不为visible)

2.display:flex

将元素设置为弹性布局,其子元素的float、clear和vertical-align均会失效

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹