border实现的两侧等高
border实现的两侧等高布局
左右两侧等高布局
在现实开发中,很多时候会遇到左右两侧等高问题;很多时候会想到使用JS或jQuery右侧的高度赋值个左侧的div容器;这两天脑子突然想到一种折腾方法;就开放代码测试了一下,居然成功了;所以写下来记录一下,以供后续查阅。
实例就是使用HTML的border属性
思路说明:利用border-left+margin实现等高布局,左侧由border-left属性生成,设置border大小为220px,再利用margin-left的负值 -220px设置aside容器,使之与左侧对齐;这样就能实现右侧增加左侧同时增加;
链接: link.
图片: 运行效果图
前端CSS代码。
ul{
margin:0px;
padding:0px;
}
.container{margin:30px 0px;}
.main-wrapper {
/*重点代码 */
border-left: 220px solid #1a1b20;
background-color: #f5f5f5;
}
.main-wrapper:after {
content: "";
display: block;
clear: both;
}
.main-wrapper > aside {
/*重点代码 */
width: 220px;
margin-left: -220px;
float: left;
}
.main-wrapper > aside ul li{
list-style: none;
}
.main-wrapper > aside ul li a{
display:block;
color:#FFFFFF;
padding:10px;
text-decoration:none;
}
.main-wrapper > aside ul li a:hover{
background:rgb(0, 150, 136) !important;
}
.main-wrapper > section {
overflow: hidden;
padding:10px;
}
.main-wrapper > section .page-content{
overflow: hidden;
}
前端HTML页面代码
<div class="main-wrapper">
<aside>
<ul class="nav">
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">待办</a></li>
<li><a href="javascript:;">任务</a></li>
<li><a href="javascript:;">Bug</a></li>
<li><a href="javascript:;">需求</a></li>
<li><a href="javascript:;">项目</a></li>
<li><a href="javascript:;">动态</a></li>
<li><a href="javascript:;">档案</a></li>
<li><a href="javascript:;">密码</a></li>
</ul>
</aside>
<section>
<div class="page-content">首页</div>
<div class="page-content">待办-待办</div>
<div class="page-content">任务-任务-任务-任务-任务</div>
</section>
</div>
更多分享
更多分享请加我我们一起进步;Q群 :149663025;演示原型demo入群下载