页面里常用的排布

最新推荐文章于 2020-11-20 14:31:14 发布

爱分享的Martin、

最新推荐文章于 2020-11-20 14:31:14 发布

阅读量133

点赞数

分类专栏： H_C_J

本文链接：https://blog.csdn.net/qq_37026254/article/details/99638728

版权

H_C_J 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

- 常用于头部排布的双飞翼和圣杯

#双飞翼
两端固定，中路自适应

<style type="text/css">
.main{ 
	background: #D6D6D6; 
	width:100%; 
	float:left; 
} 
.mc { 
	margin-left: 150px;
	display: inline-block; 
}
.left{ 
	background: #E79F6D; 
	width:150px; 
	float:left; 
	margin-left: -100%; 
}  
.right{ 
	background: #77BBDD; 
	width:190px; 
	float:left; 
	margin-right: -190px;
	position: relative;
	right: 190px;
}
<body> 
　　<div class="main"> 
　　　　<div class="mc">Main</div> 
　　</div> 
　　<div class="left">Left</div> 
　　<div class="right">Right</div> 
</body>

#圣杯
两端固定，中路自适应

<style type="text/css">
.content { 
	padding-left: 150px; 
	padding-right: 190px; 
} 
.left{ 
	background: #E79F6D; 
	width:150px; 
	float:left; 
	margin-left: -100%; 
	position: relative; 
	left:-150px; 
} 
.main{ 
	background: #D6D6D6; 
	width:100%; 
	float:left; 
} 
.right{ 
	background: #77BBDD; 
	width:190px; 
	float:left; 
	margin-right: -190px; 
} 
</style>
<div class="content">
　　<div class="main">Main</div> 
　　<div class="left">Left</div> 
　　<div class="right">Right</div>
</div>

- 用于列表展示

除最后一个元素其他元素添加底部分割线（例如新闻列表）

<style type="text/css">
	ul>li+li{
		border-top: 1px red solid;
		padding: 15px 0;
	}
</style>
<ul>
	<li>111</li>
	<li>111</li>
	<li>111</li>
	<li>111</li>
	<li>111</li>
</ul>

display:table实现多列等高布局

<style type="text/css">
	.container{
		border: 1px #000 solid;
		display: table;
		border-spacing: 15px;
		width: 100%;
	}
	.container p{
		background-color: #00ffff;
		display: table-cell;
		border : 1px #000 solid;
	}
</style>
<div class="container">
	<p style="height: 300px"></p>
	<p></p>
	<p></p>
	<p></p>
</div>

爱分享的Martin、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面里常用的排布

- 常用于头部排布的双飞翼和圣杯#双飞翼两端固定，中路自适应<style type="text/css">.main{ background: #D6D6D6; width:100%; float:left; } .mc { margin-left: 150px; display: inline-block; }.left{ background:...
复制链接

扫一扫

专栏目录