布局:flex弹性布局_百分比
百分比布局:某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
section{ display:-webkit-flex; display: flex; } article,aside{border:1px solid red;} .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; } .Grid-cell.u-1of3 { flex: 0 0 33.3333%; } .Grid-cell.u-1of4 { flex: 0 0 25%; }
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>H5标准页面</title>
<link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
</head>
<body>
<section >
<article class="Grid-cell u-1of2 ">
1/2
</article>
<aside class="Grid-cell">
auto
</aside>
<aside class="Grid-cell">
auto
</aside>
</section>
<section>
<articla class="Grid-cell" >
auto
</article>
<aside class="Grid-cell u-1of3" >
1/3
</aside>
</section>
<section>
<aside class="Grid-cell u-1of4" >
1/4
</aside>
<article class="Grid-cell" >
auto
</article>
<aside class="Grid-cell u-1of3" >
1/3
</aside>
</section>
</body>
</html>