Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS布局自适应模块等分比例的例子

CSS布局自适应模块等分比例的例子

发布时间:2017-12-12   编辑:www.jquerycn.cn
jquery中文网为您提供CSS布局自适应模块等分比例的例子等资源,欢迎您收藏本站,我们将为您提供最新的CSS布局自适应模块等分比例的例子资源
自适应在开发应用中用到的比较多了我们下面来看一篇关于CSS布局自适应模块等分比例经典例子,希望对各位有用。

CSS等比例划分,在CSS布局中是比较重要的,运行以下代码,查看事例。

除了事例中的几个方法,还有个兼容性较好的方法,就是使用百分比,但是增减内容的时候,容易错乱。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7812')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7812>

<!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>

</td></tr></table>

您可能感兴趣的文章:
CSS布局自适应模块等分比例的例子
网页设计之css div PK table css
深入分析CSS 模块化基础知识
经验分享:CSS组合CLASS来完成网页布局风格
css3中flexbox伸缩盒深入理解
使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript
网页制作之如何管理好网站的css样式
用PHP制作静态网站的模板框架
深入分析CSS布局中BFC及例子应用
CSS3的display:box 比例均分的例子

[关闭]