【CSS布局】左侧固定宽度右侧100%布局的六种实现方式
本文由 小茗同学 发表于 2018-05-23 浏览(68)
最后修改 2018-05-27 标签:css

兼容性较好的3种方法

方法一:float+overflow

实现:左边浮动+固定宽度,右边overflow:hidden即可,注意,右边不要设置width:100%。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以若要兼容IE6需要设置zoom:1

原理:overflow:hidden会触发BFCBFC不会浮动元素重叠,因此会重新计算宽度。

<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px; margin-right: 10px;}
.content { overflow: hidden; zoom: 1; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">左侧浮动,宽度固定300px</aside>
	<article class="content">右侧overflow:hidden</article>
</section>

方法二:float+padding

其实这是最容易想到的方法,实现:左边浮动+固定宽度,右边设置一个padding-left,然后再在里面套一个div即可,缺点是需要多一层结构。

<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper {padding-left: 310px;}
.content { background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">左侧浮动,宽度固定300px</aside>
	<div class="content-wrapper">
		<article class="content">padding-left:310px</article>
	</div>
</section>

方法三:float+负margin

实现:左右都浮动,左侧宽度固定,右侧100%,同时设置一个负的margin-left来保证在同一行,再在子div设置一个正的margin-left

<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper {float: left; margin-left: -300px; width:100%;}
.content {margin-left: 310px; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">左侧浮动,宽度固定300px</aside>
	<div class="content-wrapper">
		<article class="content">右侧浮动,宽度100%,同时外层margin-left: -300px;,内层margin-left: 310px;</article>
	</div>
</section>

方法四:table

使用table布局的缺点是元素被设置为table后,内容撑开宽度,所以需要设置width:100%。由于table-cell元素无法设置margin,若需要在元素间设置间距,需要增加结构。

<style>
.container{display:table; width: 100%;}
.aside {display:table-cell; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper{display:table-cell;}
.content {margin-left: 10px; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">display:table-cell;,宽度固定300px</aside>
	<div class="content-wrapper">
		<article class="content">display:table-cell;</article>
	</div>
</section>

兼容现代浏览器的方法

方法五:float+calc

2边都浮动,右侧宽度采用calc来计算,只兼容现代浏览器。

<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; margin-right: 10px; background: #F6D3FF; height: 200px;}
.content {float: left; width: calc(100% - 310px); background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">左侧浮动,宽度固定300px</aside>
	<article class="content">右侧浮动,宽度 calc(100% - 310px)</article>
</section>

方法六:flex

<style>
.container{display: flex;}
.aside {width: 300px; margin-right: 10px; background: #F6D3FF; height: 200px;}
.content {flex: 1; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
	<aside class="aside">左侧宽度固定300px</aside>
	<article class="content">父容器设置display:flex,右侧flex:1</article>
</section>

结尾

还有其它一些方法,比如inline-blockgrid等,个人觉得掌握以上方法足够了,所以这里不讲。