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

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


<style>
body,div{
margin: 0;
padding: 0;
}
.table-layout{
display: table;/*父元素必须设置为table*/
table-layout: fixed;/*这个属性一定要有,否则达不到效果*/
width: 50%;
margin: 20px auto;
}
.table-cell-layout{
display: table-cell;/*子元素必须设置为table-cell*/
height: 40px;
border: 1px solid #666;
border-left: none;
}
.table-cell-layout:first-child{
border-left: 1px solid #666;
}
</style> <body>
<ul class="table-layout">
<li class="table-cell-layout">li1</li>
<li class="table-cell-layout">li2</li>
<li class="table-cell-layout">li3</li>
<li class="table-cell-layout">li4</li>
<li class="table-cell-layout">li5</li>
</ul>
</body>

2、使用flex布局来实现


<style>
body,div{
margin: 0;
padding: 0;
}
.flex-layout{
display: flex;
width: 50%;
margin: 20px auto;
}
.flex-item{
flex: 1;
height: 40px;
border: 1px solid #666;
border-left: none;
}
.flex-item:first-child{
border-left: 1px solid #666;
}
</style> <body>
<ul class="flex-layout">
<li class="flex-item">li1</li>
<li class="flex-item">li2</li>
<li class="flex-item">li3</li>
<li class="flex-item">li4</li>
<li class="flex-item">li5</li>
</ul>
</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. elasticsearch集群部署以及head插件安装

    环境准备 elasticsearch是Java程序写的因此必须装jdk,否则使用不了. [root@openstack ~]# java -versionopenjdk version "1 ...

  2. Druid数据源监控配置

    在web.xml中添加如下代码 <!-- druid监控 --> <servlet> <servlet-name>DruidStatView</servlet ...

  3. 树状数组优化dp,一维排序,一维离散化

    #include<iostream> #include<cstdio> #include<algorithm> #include<vector> #in ...

  4. python查找鞍点

    问题:对于给定5X5的整数矩阵,设计算法查找出所有的鞍点的信息(包括鞍点的值和行.列坐标,坐标从1开始). 提示:鞍点的特点:列上最小,行上最大. 思路:求出每一行的最大值,将行号.列号.值存入列表中 ...

  5. 使用vagrant一键部署本地php开发环境(二)制作自己的vagrant box

    在上篇的基础上 ,我们已经安装好了virtualbox和vagrant,没有安装的话,参照上篇 使用vagrant一键部署本地php开发环境(一) 1.从网易镜像或阿里等等镜像下载Centos7 ht ...

  6. 如何使用git send-email发送补丁?

    答: git send-email <patch-name> --to <username>@<example>.com --cc <username> ...

  7. jmeter之吞吐量控制器

    比如说有一种场景是,10个并发里,有2个事操作业务A,有8个是操作业务B,要模拟这种业务场景,则可以通过吞吐量控制器来模拟 目录 1.用法 2.举例 1.用法 第一种:设置比例控制 选择percent ...

  8. coreDNS域名无法解析问题

    问题: 在pod内无法解析域名 解决: busybox的镜像有bug,导致ping可以解析,但是nslookup无法解析 kubectl run -it --rm --image=infoblox/d ...

  9. html5 iphone input 输入法 弹窗将页面顶起 解决办法

    给 input 添加失焦事件,然后滚动视图 input.search(type="text",@blur="scrollTop") scrollTop(){ w ...

  10. linux 网络相关

    1. 配bond 模式 将eth0 和 eth1 绑定 ,master 为bond2 ,直接上文件 eth0   和 eth1 , 类似,如下 ,关键点  MASTER and  SLAVE TYPE ...