div 分栏布局

发表于 2016-12-16 11:39:37   |   下载附件   |   字体:
分栏布局TAB布局CSS3分栏

手机端CSS3 分栏布局代码样式实例,效果图:可以放弃 float left 布局方式


CSS样式

.nav { border-bottom: 1px solid #ccc;display: -webkit-box; display: -webkit-flex; display: flex;align-items:center; position: relative; }
.nav span { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: center; color: #222; background-color: #fafafa;  border-left: 1px solid #ccc; height: 4rem; font: 1.25rem/4rem 'Microsoft Yahei'; }
.nav span:first-child { border:0 none; }
.nav span.on { background-color: #eaeaea; border-right: 0 none; }


HTML代码

<div class="nav">
	<span class="on">参赛奖励</span>
	<span>投票奖励</span>
	<span>活动规则</span>
</div>