前端开发---页面布局解决方案2

1、多列布局

1、定宽和自适应情况下

html文档：

<div class="parent">
	<div class="left">
		<div class="left_content">不定宽</div>
	</div>
	<div class="right">
		<div class="right_content">自适应</div>
		<div class="right_content">自适应</div>
	</div>
</div>

float + margin 解决方案 ：

.left{float:left;width:100px;}
.right{margin-left:110px;}

特点：因为.right不浮动，IE6下会出现问题：.right的元素文字缩进3像素（解决方案：在.left元素设置margin-left，属性值为负的.left的矿都），高版本浏览器下没问题。另外，因为.right不浮动，在.right的子元素中设置clear清除浮动属性也会出现问题。

解决该方案出现的问题：float + margin + (fix)

<div class="parent">
	<div class="left">
		<div class="left_content">不定宽</div>
	</div>
	<div class="right_flex">
		<div class="right">
			<div class="right_content">自适应</div>
			<div class="right_content">自适应</div>
		</div>
	</div>
</div>

在HTML文件中.right元素添加一个父元素。为父元素.right_flex添加float属性

.left{float: left;width: 100px;}
.right_flex{float: right;width: 100%;margin-left:-100px;}
.right{margin-left:120px;}

 float + overflow 解决方案：

.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}

特点：.right元素添加overflow属性，出发BFC模式，.right容器内的元素不会被外面的元素隔离，.right的子元素就不会环绕.left元素，缺点：IE6不支持该方案。

table 解决方案：

.parent{display:table;width:100%;table-layout:fixed;}
.parent>div{display:table-cell;}
.left{width:100px;padding-right:10px;background-clip:content-box;}

特点：display:table;是根据内容定义宽度的，而在本案例中，宽度与内容无关，所以添加table-layout:fixed;另外在设置了display：table-cell;的元素内没法使用margin，所以使用padding定义边距。

 flex 解决方案：

.parent{display:flex;}
.left{width:100px;margin-right:20px;}
.right{flex:1;}

特点：不支持低版本浏览器。另外：flex是根据内容做自适应的，性能可能是个问题，所以一般做简单布局，即flex属性的元素内的元素不是太多（结构上）。

2、不定宽和自适应情况下

在上面的五种解决方案，后三种方案可以使用。

table方案：

.parent{display:table;width:100%;}
.parent>div{display:table-cell;}
.left{width:0.1%;padding-right:10px;background-clip: content-box;}
.left>.left_content{width:200px;}

把table-layout:fixed;去掉，.left设置width：0.1%兼容操作。

3、等分布局

float解决方案：

<div class="parent">
	<div class="column">column1</div>
	<div class="column">column2</div>
	<div class="column">column3</div>
	<div class="column">column4</div>
</div>

.parent{width: 100%;margin-left:-20px;}
.parent>.column{float: left;width:25%;padding-left:20px;box-sizing: border-box;}

table解决方案：

<div class="parent_flex">
	<div class="parent">
		<div class="column">column1</div>
		<div class="column">column2</div>
		<div class="column">column3</div>
		<div class="column">column4</div>
	</div>	
</div>

.parent_flex{margin-left: -20px;}
.parent{width: 100%;display: table;table-layout: fixed;}
.column{display: table-cell;padding-left: 20px;}

 

特点：display:table;没法设置margin,并且table元素宽度跟随父元素的宽度变化而变化。所以添加一个父元素.parent_flex并设置margin。

flex结局方案：

.parent{display:flex;}
.column{flex:1}
.column+.column{margin-left:20px;}

4、等高布局

table方案与flex方案很容解决就不介绍了

float解决方案：（伪等高）

<div class="parent">
    <div class="left">
        <div class="left_content">left</div>
    </div>
    <div class="right">
        <div class="right_content">right</div>
        <div class="right_content">right</div>
    </div>
</div>

.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}