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个固定元素的总宽;