您的位置：首页 > 网站优化 > css  >  CSS布局自适应模块等分比例的例子

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

 更新时间：2016年9月14日 14:19  点击：2130
自适应在开发应用中用到的比较多了我们下面来看一篇关于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--]

相关文章

  • C#窗体布局方式详解

    这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25

  • Element图表初始大小及窗口自适应实现

    这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10

  • Python运行提示缺少模块问题解决方案

    这篇文章主要介绍了Python运行提示缺少模块问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-10

  • Perl模块编写说明

    这两天在用Perl编写一些监控脚本，其实写代码也是一件挺有意思的事情，就是挺废时间的。而且，由于语法不太熟，基本想到一个东西都要先Google一下看怎么实现。...2020-06-29

  • js中flexible.js实现淘宝弹性布局方案

    这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25

  • Python PyPDF2模块安装使用解析

    这篇文章主要介绍了Python PyPDF2模块安装使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-04-22

  • 从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09

  • 在echarts中图例legend和坐标系grid实现左右布局实例

    这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17

  • c#通用登录模块分享

    这是一款简单的ASP.NETC#注册登录模块制作思路，非常简单实用，虽然没怎么考虑登陆的安全性，但作为C#的朋友学习交流使用。...2020-06-25

  • Flex网页布局基础入门及实例教程

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • JavaScript瀑布流布局实现代码

    这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • Python xmltodict模块安装及代码实例

    这篇文章主要介绍了Python xmltodict模块安装及代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-05

  • python speech模块的使用方法

    这篇文章主要介绍了python speech模块的使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-09

  • echarts使图标能自适应浏览器窗口变化，及经纬度转换

    本文章来为各位一篇关于echarts使图标能自适应浏览器窗口变化，及经纬度转换的例子，希望文章能够帮助到各位同学哦。 1、echarts使图标能自适应浏览器窗口变化 wind...2016-09-20

  • 解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • js实现瀑布流布局（无限加载）

    这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • winform 使用Anchor属性进行界面布局的方法详解

    这篇文章主要介绍了winform 使用Anchor属性进行界面布局的方法，有需要的朋友可以参考一下...2020-06-25

  • Node.js API详解之 console模块用法详解

    这篇文章主要介绍了Node.js API详解之 console模块用法,总结分析了Node.js API中console模块基本函数、使用方法与操作注意事项,需要的朋友可以参考下...2020-05-12

  • Lua中的模块(module)和包(package)详解

    这篇文章主要介绍了Lua中的模块(module)和包(package)详解,本文讲解了require函数、写一个模块、package.loaded、module函数等内容,需要的朋友可以参考下...2020-06-30