自适应在开发应用中用到的比较多了我们下面来看一篇关于CSS布局自适应模块等分比例经典例子，希望对各位有用。
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>
|
标签：[!--infotagslink--]