本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。

1、使用table-cell实现(兼容ie8)


  2. <style>
  3.     body,div{
  4.         margin: 0;
  5.         padding: 0;
  6.     }
  7.     .table-layout{
  8.         display: table;/*父元素必须设置为table*/
  9.         table-layout: fixed;/*这个属性一定要有，否则达不到效果*/
  10.         width: 50%;
  11.         margin: 20px auto;
  12.     }
  13.     .table-cell-layout{
  14.         display: table-cell;/*子元素必须设置为table-cell*/
  15.         height: 40px;
  16.         border: 1px solid #666;
  17.         border-left: none;
  18.     }
  19.     .table-cell-layout:first-child{
  20.         border-left: 1px solid #666;
  21.     }
  22. </style>
  24. <body>
  25.     <ul class="table-layout">
  26.         <li class="table-cell-layout">li1</li>
  27.         <li class="table-cell-layout">li2</li>
  28.         <li class="table-cell-layout">li3</li>
  29.         <li class="table-cell-layout">li4</li>
  30.         <li class="table-cell-layout">li5</li>
  31.     </ul>
  32. </body>

2、使用flex布局来实现


  2. <style>
  3.     body,div{
  4.         margin: 0;
  5.         padding: 0;
  6.     }
  7.     .flex-layout{
  8.         display: flex;
  9.         width: 50%;
  10.         margin: 20px auto;
  11.     }
  12.     .flex-item{
  13.         flex: 1;
  14.         height: 40px;
  15.         border: 1px solid #666;
  16.         border-left: none;
  17.     }
  18.     .flex-item:first-child{
  19.         border-left: 1px solid #666;
  20.     }
  21. </style>
  23. <body>
  24.     <ul class="flex-layout">
  25.         <li class="flex-item">li1</li>
  26.         <li class="flex-item">li2</li>
  27.         <li class="flex-item">li3</li>
  28.         <li class="flex-item">li4</li>
  29.         <li class="flex-item">li5</li>
  30.     </ul>
  31. </body>

来源：https://segmentfault.com/a/1190000017764682

css多种方式实现等宽布局的更多相关文章

  1. 多种方式实现平均分栏布局（有间距）div平分行宽

    以下例子基于分四栏+栏间有间距的例子分析 效果图:  html代码: <div class="buy-one-buy"> <h3>淘一淘</h3> ...

  2. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  3. CSS多种方式实现底部对齐

    CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...

  4. HTML系列：js和css多种方式实现隔行变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS多种方式实现元素水平垂直居中

    html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. CSS 实现：两栏布局（等宽布局）

    ☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...

  8. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  9. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

随机推荐

  1. ie中兼容性问题

    由于项目要要兼容到ie8原本没有问题的代码一但用ie8打开js的报错找不到对象就都来了,其实总结起来就是ie越老的版本就越多方法名识别不到,那就少什么方法添加什么,比如说我的项目就要引入<scr ...

  2. php原生导出简单word表格(TP为例) (原)

      后台: # 菲律宾名单word导出 public function export_word(){ $tids = $_GET['tids']; $userinfo=M("philippi ...

  3. css实现元素在div底部显示

    #CSS .1 {position:relative;} .2 {;} #HTML <div class="1"> <div class="2" ...

  4. Linux设备驱动程序 之 重要数据结构

    文件对象 文件对象是进程已经打开文件描述符的内存中的表示,单个文件可能有多个表示打开文件描述符的file结构: struct file { union { struct llist_node fu_l ...

  5. matplotlib：plt.rcParams设置画图的分辨率，大小等信息

    主要作用是设置画的图的分辨率,大小等信息 plt.rcParams['figure.figsize'] = (8.0, 4.0) # 设置figure_size尺寸 plt.rcParams['ima ...

  6. pip下载提速

    方法一使用国内镜像: 清华:https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中 ...

  7. 2.3 Go语言基础之数组

    本文主要介绍Go语言中数组(array)及它的基本使用. 一.Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化. 基 ...

  8. DeepLearningBook（中文版）书PDF

    介绍深度学历基础理论.模型和应用.(738页). 第一部分 应用数学与机器学习基础,包括深度学习需要用到的线性代数.概率与信息论.数值计算.机器学习等内容. 第二部分 深度网络:现代实践,包括深度前馈 ...

  9. Nginx优化之服务性能优化

    优化Nginx服务的worker进程个数 修改nginx主配置文件 worker_processes 1; #指定了Nginx要开启的进程数,结尾数字就是进程个数 Nginx有Master进程和wor ...

  10. Oracle Database的基本概念

    一个 Oracle 服务器:是一个关系数据库管理系统(RDBMS),它提供全面的, 近乎完整的信息管理由Oracle 实例和Oracle 数据库组成Oracle 数据库 和 Oracle 实例Orac ...