三栏布局（左右宽度固定，中间自适应）的实现方式及其延伸问题

最新推荐文章于 2024-04-11 00:14:29 发布

quan!!!

最新推荐文章于 2024-04-11 00:14:29 发布

阅读量626

点赞数 3

分类专栏： CSS 布局文章标签： CSS 布局三栏布局

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

布局

3 篇文章 0 订阅

订阅专栏

全局CSS设定

html *{
    padding: 0;
    margin: 0;
}
section {
	margin: 20px 0;
}
article > div {
	min-height: 100px;
}

浮动三栏布局
必须先写左右盒子再写中间盒子的html结构，设置左右两个盒子的宽高和浮动

<section class="layout float">
	<style>
		.layout.float .left-middle-right {
			overflow: hidden;  /*清除浮动*/
		}
		.layout.float .left-middle-right .left {
			width: 300px;
			float: left;
			background: red;
		}
		.layout.float .left-middle-right .right {
			width: 300px;
			float: right;
			background: blue;
		}
		.layout.float .left-middle-right .middle {
			background: yellow;
		}
	</style>
	<article class="left-middle-right">
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="middle">middle</div>
	</article>
</section>

中间盒子的高度超过左右时，会延伸填充满父DIV宽度，内容会飘到左边，这和浮动的原理有关，因为都是块级元素，当没超过左右盒子时，会有阻挡物阻挡，超过时就没得阻挡，自然就填充剩余的地方，那如果要和原先的宽度一致，则要加上margin

<section class="layout float">
	<style>
		.layout.float .left-middle-right {
			overflow: hidden;  /*清除浮动*/
		}
		.layout.float .left-middle-right .left {
			width: 300px;
			float: left;
			background: red;
		}
		.layout.float .left-middle-right .right {
			width: 300px;
			float: right;
			background: blue;
		}
		.layout.float .left-middle-right .middle {
			background: yellow;
			margin-left: 300px;
			margin-right: 300px;
		}
	</style>
	<article class="left-middle-right">
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="middle">middle</div>
	</article>
</section>

优点：比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

缺点：浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等，而且由于中间html写在最后，无法优先加载重要内容。

绝对定位三栏布局
父盒子进行相对定位，对左右盒子进行绝对定位，紧贴两边，中间盒子相对于两边盒子进行设置left和right，同时设定高度

    <section class="layout absolute">
    	<style>
			.layout.absolute .left-middle-right {
				position: relative;
			}
			.layout.absolute .left-middle-right .left {
				position: absolute;
				width: 300px;
				left: 0;
				background: red;
			}
			.layout.absolute .left-middle-right .right {
				position: absolute;
				width: 300px;
				right: 0;
				background: blue;
			}
			.layout.absolute .left-middle-right .middle {
				position: absolute;
				left: 300px;
				right: 300px;
				background: yellow;
			}
    	</style>
    	<article class="left-middle-right">
    		<div class="left">left</div>
    		<div class="right">right</div>
    		<div class="middle">middle</div>
    	</article>
    </section>

优点：很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式，而且可以和JS一起使用设置

缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

flex三栏布局

    <section class="layout flex">
    	<style>
			.layout.flex .left-middle-right {
				display: flex;
				margin-top: 140px;
			}
			.layout.flex .left-middle-right .left {
				width: 300px;
				background: red;
			}
			.layout.flex .left-middle-right .right {
				width: 300px;
				background: blue;
			}
			.layout.flex .left-middle-right .middle {
				flex: 1;
				background: yellow;
			}
    	</style>
    	<article class="left-middle-right">
    		<div class="left">left</div>
    		<div class="middle">middle</div>
    		<div class="right">right</div>
    	</article>
    </section>

优点：felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。

缺点：不能兼容IE9及以下浏览器。

表格布局
要设置表格父容器的宽高

    <section class="layout table">
    	<style>
			.layout.table .left-middle-right {
				width: 100%;
				display: table;
				height: 100px;
			}
			.layout.table .left-middle-right .left {
				width: 300px;
				background: red;
				display: table-cell;
			}
			.layout.table .left-middle-right .right {
				width: 300px;
				background: blue;
				display: table-cell;
			}
			.layout.table .left-middle-right .middle {
				background: yellow;
				display: table-cell;
			}
    	</style>
    	<article class="left-middle-right">
    		<div class="left">left</div>
    		<div class="middle">middle</div>
    		<div class="right">right</div>
    	</article>
    </section>

优点：
表格布局在历史上遭到很多人的摒弃，说表格布局麻烦，操作比较繁琐，其实这是一种误解，在很多场景中，表格布局还是很适用的，比如这个三栏布局，用表格布局就轻易写出来了。还有表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。

缺点：
表格布局也是有缺陷的，当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。

网格布局

    <section class="layout grid">
    	<style>
			.layout.grid .left-middle-right {
				width: 100%;
				display: grid;
				grid-template-rows: 100px;
				grid-template-columns: 300px auto 300px;
			}
			.layout.grid .left-middle-right .left {
				width: 300px;
				background: red;
			}
			.layout.grid .left-middle-right .right {
				width: 300px;
				background: blue;
			}
			.layout.grid .left-middle-right .middle {
				background: yellow;
			}
    	</style>
    	<article class="left-middle-right">
    		<div class="left">left</div>
    		<div class="middle">middle</div>
    		<div class="right">right</div>
    	</article>
    </section>

优点：
是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

缺点：
兼容性不好。IE10+上支持，而且也仅支持部分属性。

圣杯布局

主面板设置宽度为100%，主面板和两个侧栏都设置浮动，常见为左浮动，这个两个侧栏会被主面板挤下去，通过设置负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。
为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负边距是相对主面板的，所以两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢，此时使用相对布局，调整两个侧栏到相应的位置。
注意dom结构不能变，而且注意要清除浮动，避免高度坍塌

<section class="layout shengbei">
 	<style>
		.layout.shengbei .left-middle-right {
			padding: 0 300px 0 300px;
		}
		.layout.shengbei .left-middle-right > div {
			position: relative;
			float: left;
		}
		.layout.shengbei .left-middle-right .left {
			left: -300px;
			background: red;
			width: 300px;
			margin-left: -100%;
		}
		.layout.shengbei .left-middle-right .right {
			right: -300px;
			width: 300px;
			background: blue;
			margin-left: -300px;
		}
		.layout.shengbei .left-middle-right .middle {
			background: yellow;
			width: 100%;
		}
 	</style>
 	<article class="left-middle-right">
 		<div class="middle">middle</div>
 		<div class="left">left</div>
 		<div class="right">right</div>
 	</article>
 </section>

优点：可优先渲染主要部分，兼容性好，结构简单

缺点：

有一个最小宽度，当页面小于最小宽度时布局就会乱掉。
所以最好给body设置一个min-width。这个min-width肯定不能是试出来的，怎么计算呢？就是left-width * 2 +right-width，至于为什么，简单的说就是：“由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行”。
因为「圣杯布局」存在宽度过小导致布局混乱的缺陷，阿里淘宝提出了「双飞翼布局」

双飞翼布局
思想：

	<section class="layout feiyi">
    	<style>
    		.layout.feiyi .left-middle-right {
    			overflow: hidden;
    		}
    		.layout.feiyi .left-middle-right > div {
    			float: left;
    		}
    		.layout.feiyi .left-middle-right .left {
    			width: 300px;
    			background: red;
    			margin-left: -100%;
    		}
    		.layout.feiyi .left-middle-right .right {
    			width: 300px;
    			background: blue;
    			margin-left: -300px;
    		}
    		.layout.feiyi .left-middle-right .content {
    			width: 100%;
    			background: yellow;
    		}
    		.layout.feiyi .left-middle-right .middle {
    			margin: 0 300px;
    		}
    	</style>
    	<article class="left-middle-right">
    		<div class="content">
    			<div class="middle">middle</div>
    		</div>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</article>
    </section>

优点：解决了圣杯布局的问题，通用性强，支持各种宽高变化

缺点：但是「双飞翼布局」增加了 DOM 树的层级，因此也会增加浏览器渲染引擎构建布局树时的计算消耗

双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。

其他的布局方法

	<section class="layout new">
    	<style>
    		.layout.new .left-middle-right {
    			position: relative;
    		}
    		.layout.new .left-middle-right > div {
    			
    		}
    		.layout.new .left-middle-right .left {
    			position: absolute;
    			top: 0;
    			width: 300px;
    			background: red;
    			left: 0;
    		}
    		.layout.new .left-middle-right .right {
    			position: absolute;
    			top: 0;
    			width: 300px;
    			background: blue;
    			right: 0;
    		}
    		.layout.new .left-middle-right .middle {
    			margin: 0 300px;
    			background: yellow;
    		}
    	</style>
    	<article class="left-middle-right">
    		<div class="middle">middle</div>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</article>
    </section>