CSS布局技巧 兼容的写法


前自适应后跟随 兼容版

这种布局常用于新闻列表展示, 新闻发布时间的位置始终保持不变. (调整页面宽度查看效果)

这是一段长度未知的文本,自动换行,且不会把右边的时间挤掉,修改这段文字长度或改变窗口宽度试试。
1900-01-01

固定宽度下, 可txt-substr截断文本

这是一段长度未知的文本,自动换行,且不会把右边的时间挤掉,修改这段文字长度或改变窗口宽度试试。
1900-01-01
html css
<div class="exl-demo clear">
	<div class="exl-demo-title">这是一段长度未知的文本,自动换行,且不会把右边的时间挤掉,修改这段文字长度或改变窗口宽度试试。</div>
	<div class="exl-demo-date">1900-01-01</div>
</div>
					
.exl-demo{
	padding:5px 0;
	border-bottom:1px dotted #ddd;
	font-size:12px;
}
.exl-demo .exl-demo-title {
	float:left;
	margin-right:80px;
	clear: none;/* 兼容QPF框架所需 */
}
.exl-demo .exl-demo-date{
	display:inline;
	float:left;
	margin-left:-70px;
	clear: none;/* 兼容QPF框架所需 */
}
					

一行两列 兼容版

主内容区

侧栏区 - 固定200px

侧栏区 - 固定200px

主内容区

html css 说明
<div class="row clear">
	<div class="exl-left-col ">
		<div class="exl-left-cont-col q-bg-auto">
			<p>主内容区</p>
		</div>
	</div>
	<div class="exl-right-col q-bg-1 q-bg-auto">
		<p>侧栏区 - 固定200px</p>
	</div>
</div>
					
.exl-left-col{
	float: left;
	clear: none;/* qpf-ui */
	width: 100%;
	margin-right: -200px; /* 清除右浮动的页面位置, 左浮动独占100%宽 */
}
.exl-left-cont-col{
	margin-right:210px; /* 左浮动区, 预留出 间距+右浮动的总宽度 */
}
.exl-right-col{
	float: right;
	clear: none; /* qpf-ui */
	width: 200px;
	
}
					
一行2列的兼容布局

自适应宽度元素 =  宽度100%, margin-[right|left]外间距 负值固定宽度的像素. 左浮动
固定元素 = 固定200px宽度, 右浮动.

- 左宽度100% , 右宽度200, 2个元素都分别左右浮动, 示例展示的为右固定.
- 左的右外边距 -200px; 即 左增加了200px. 实现100%宽度
- 右浮动位置不变.
					

一行3列 兼容版

自适应内容区

右固定 - 200px

左固定 - 200px

html css 说明
<div class="row clear">
	
	<div class="col-auto">
		<div class="col-auto-cont">
			<div class="cont-auto">
				<div class="cont-auto-cont q-bg-auto">
					<p>自适应内容区</p>
				</div>
			</div>
			<div class="cont-fix q-bg-auto">
				<p>右固定 - 200px</p>
			</div>
		</div>
	</div>
	
	<div class="col-fix q-bg-auto">
		<p>左固定 - 200px</p>
	</div>
</div>
					
/* 自适应边框 */
.col-auto{
	float: right;
	clear: none; /*qpf*/
	width: 100%;
	margin-left: -200px;
}
/* 自适应内容区 */
.col-auto-cont{
	margin-left: 210px; /* col-fix + 10px */
}
/* 固定区 */
.col-fix{
	float: left;
	clear: none; /*qpf*/
	width: 200px;
}

/* 自适应区 */
.cont-auto{
	width: 100%;
	float: left;
	clear: none; /*qpf*/
	margin-right: -200px;
}
/* 自适应区内容 */
.cont-auto-cont {
	margin-right: 210px;
}
/* 固定区 */
.cont-fix{
	float: right;
	clear: none; /*qpf*/
	width: 200px;
}
					
row( 左200px | 右100%(左100% + 右200px) );
嵌套的方式, 在自适应区内再次分割固定与适应.
					

一行3列 兼容版

自适应

a固定300px
b固定200px
html css 说明
<div class="row clear">
	<div class="col-right-boxauto">
		<div class="right-auto-cont q-bg-auto">
			<p>自适应</p>
		</div>
	</div>
	<div class="col-left-fix1 q-bg-auto">a固定300px</div>
	<div class="col-left-fix2 q-bg-auto">b固定200px</div>
</div>
					
.col-right-boxauto{
	float: right;
	clear: none;/*qpf*/
	width: 100%;
	margin-left: -520px; /* 310 + 210 */
}
.right-auto-cont{
	margin-left: 520px;
}
.col-left-fix1{
	float: left;
	clear: none;/*qpf*/
	width: 300px;
	margin-right: 10px;
}
.col-left-fix2{
	float: left;
	clear: none;/*qpf*/
	width: 200px;
}
					
自适应区域首先 还是独占100%宽度, 但要减去2个固定元素的总宽;

					

高度100% 兼容版

高度100%是指占用剩余的所有高度. 元素的高度只继承上一级父元素的高度.

获得游览器高度的100%

html, body{
	height: 100%;
    margin: 0px;
    padding: 0px;
}
#main{
	height: 100%; /* 生效 */
}
			    

通过定位实现

#main 中设置一个固定高度为50px的元素, 如何获得下面剩余的高度.

固定高度
自适应高度,
由于父元素设置了左右内填充. 定位会无视填充. 根据业务自行解决
html
<div style="height: 200px;width: 300px;padding: 0 15px;border: 1px solid red;position: relative;" class="bg-hei">
	<div style="height: 50px;width: 100%;" class="bg-err cl">固定高度</div>
	<div style="position: absolute;top: 50px;bottom: 0;left: 0;right: 0;" class="bg-suc txt-bai">自适应高度, <br />由于父元素设置了左右内填充. 定位会无视填充. 根据业务自行解决</div>
</div>
			        
#main{
	position: relative; /* 注意relative与absolute的关系 */
}
#nav{
	height: 50px;
	margin: 0px; /* 外间隔不能设置 */
}
#content{
	position: absolute; /* 重点是要top和bottom一起使用,可以强制定义盒模型的区域. */
    top: 50px;
    bottom: 0px;
    left: 0px;
}
			    

通过浮动来实现

将多个div全部相于游览器设置100%高度. 然后浮动

.parent {
	height: 500px; /* 父容器固定高度 */
	width: 300px;
	
}
.nav {
	height: 100px;
	width: 100%; /* 必须: 确保浮动后独占一行 */
	float: left; /* 必须: 进行浮动 */
}
.content {
	height:100%;/*必须:*/
}
			    
固定高度
自适应高度, 高度100%,
父元素设置了溢出隐藏!
html
<div style="height: 200px;width: 300px;padding: 0 15px;border: 1px solid red;box-sizing: border-box;overflow: hidden;" class="bg-hei">
	<div style="height: 50px;width: 100%;" class="bg-err cl">固定高度</div>
	<div style="height: 100%;" class="bg-suc txt-bai">自适应高度, 高度100%, <br />父元素设置了溢出隐藏!</div>
</div>
			        
固定高度
自适应高度, 高度100%
注意: 实际上.content的高度与父元素一样高. 会溢出父元素容器. 需要为父元素设置overflow: hidden;溢出隐藏.

通过margin属性实现

父容器顶部内填充50px, 固定元素高度50px, 并添加margin-top: -50px;, 自适应区域100%即可.

固定高度 50px
自适应高度, 高度100%
html
<div style="height: 200px;width: 300px;padding-top: 50px;border: 1px solid #000;box-sizing: border-box;" class="bg-hei">
	<div style="height: 50px;width: 100%;margin-top: -50px;" class="bg-err cl">固定高度</div>
	<div style="height: 100%;" class="bg-suc">自适应高度, 高度100%</div>
</div>
			        

float与margin混合实现

将固定区域进行浮动. 固定区域会在自适应区域的上面. 但内容会占用在自适应区.

固定高度 50px, 透明背景色
自适应高度, 高度100%
html
<div style="height: 200px;width: 300px;" class="bg-hei">
	<div style="height: 50px;width: 100%;float: left;" >固定高度 50px</div>
	<div style="height: 100%;">自适应高度, 高度100%</div>
</div>
			        

absolute与margin混合实现

将固定区域进行absolute定位, 脱离了文档流, 内容区域padding-top: 50px; 防止内容重叠.

固定高度 50px, 透明背景色
自适应高度, 高度100%
html
<div style="height: 200px;width: 300px;position:relative;" class="bg-hei">
	<div style="height: 50px;width: 100%;position:absolute;">固定高度 50px, 透明背景色</div>
	<div style="height: 100%;padding-top: 50px;">自适应高度, 高度100%</div>
</div>
			        

定位与margin混合实现

固定区域与自适应区域都采用定位, 通过margin-bottom: -50px;可让自适应区向上无视固定高度. 进行重叠.

固定高度 50px, 透明背景色
自适应高度, 高度100%
html
<div style="height: 200px;width: 300px;position:relative;" class="bg-hei">
	<div style="height: 50px;width: 100%;position:relative;margin-bottom: -50px;z-index: 1;">固定高度 50px, 透明背景色</div>
	<div style="height: 100%;width: 100%;position:absolute;padding-top: 50px;" class="bg-suc">自适应高度, 高度100%</div>
</div>
			        

一行2列 内联盒子

该示例也可用浮动来解决.

效果: 两个内联盒子并没有在一行.

a
b
<div id="main">
	<div id="a" style="display: inline-block;width: 50%;">
		a
	</div>
	<div id="b" style="display: inline-block;width: 50%;">
		b
	</div>
</div>
				

效果: 将父元素的字体大小设置为0, 内联盒子需要单独设置字体大小.

a
b
<div id="main" style="font-size: 0;">
	<div id="a" style="display: inline-block;width: 50%;font-size: 14px;" class="bg-suc">
		a
	</div>
	<div id="b" style="display: inline-block;width: 50%;font-size: 14px" class="bg-err">
		b
	</div>
</div>