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入羣下載