CSS等比例劃分，在CSS布局中是比較重要的，運行以下代碼，查看案例。
除了案例中的幾個方法，還有個相容性較好的方法，就是使用百分比，但是增減內容的時候，容易錯亂。
| 代碼如下 |
複製代碼 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link media="all" href="/wp-content/themes/tonjayV2/style.css" rel="stylesheet">
<meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport">
<meta content="telphone=no" name="format-detection">
<title>等分</title>
<style id="jsbin-css">
.demo { line-height: 44px; margin-bottom: 20px; text-align: center; background-color: #0078e7; color: #fff; }
.flex-equal, .flex-center, .justify { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.flex-equal li { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
.table-equal { display: table; table-layout: fixed; width: 100%; }
.table-equal li { display: table-cell; }
.demo-center { border: 1px solid #ccc; margin: 20px; height: 200px; }
.demo-center .children { background: #0078e7; color: #fff; width: 150px; line-height: 5; text-align: center; }
.flex-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.translate-center { position: relative; }
.translate-center .children { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.justify { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 10px; background: #0078e7; color: #fff; line-height: 32px; }
</style>
</head>
<body>
<h2>flex等分</h2>
<ul class="flex-equal demo">
<li>手機</li>
<li>連絡人</li>
<li>資訊</li>
<li>主屏</li>
</ul>
<ul class="flex-equal demo">
<li>手機</li>
<li>連絡人</li>
<li>資訊</li>
</ul>
<h2>table等分</h2>
<ul class="table-equal demo">
<li>手機</li>
<li>連絡人</li>
<li>資訊</li>
<li>主屏</li>
</ul>
<ul class="table-equal demo">
<li>手機</li>
<li>連絡人</li>
<li>資訊</li>
</ul>
<h2>flex置中</h2>
<div class="flex-center demo-center">
<div class="children">子項目水平垂直置中</div>
</div>
<h2>translate置中</h2>
<div class="translate-center demo-center">
<div class="children">子項目水平垂直置中</div>
</div>
<h2>左右對齊</h2>
<div class="justify">
<h2>左邊對齊</h2>
<span>右邊對齊</span></div>
</body>
</html> |
