1. 程式人生 > >三列自適應佈局:左右定寬,中間自適應

三列自適應佈局:左右定寬,中間自適應

一個不定寬度的容器被分為左中右三列,左右兩列定寬100px,中間列自適應剩餘寬度,且三列之間間距為10px。

1.float+margin+fix

HTML結構如下

	<div class="parent">
		<div class="left"><p>左側定寬</p></div>
		<div class="center-fix">
			<div class="center"><p>中間自適應</p></div>
		</div>
		<div class="right"><p>右側定寬</p></div>
	</div>
CSS如下
	.left{
		float: left;width: 100px;
		position: relative;
	}
	.center-fix{
		width:100%;float: left;margin:0 -100px;
	}
	.center{
		margin:0 110px;
	}
	.right{
		float: left;width: 100px;
	}

2.float+margin+abosolute

HTML結構如下

	<div class="parent">
		<div class="left"><p>左側定寬</p></div>
		<div class="center"><p>中間自適應</p></div>
		<div class="right"><p>右側定寬</p></div>
	</div>
CSS如下
	.left{
		float: left;width: 100px;
	}
	.center{
		margin:0 110px;position: relative;
	}
	.right{
		float: right;width: 100px;position: absolute;top: 0;right:0;
	}