css多种方式实现等宽布局
本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯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多种方式实现等宽布局的更多相关文章
- 多种方式实现平均分栏布局（有间距）div平分行宽
以下例子基于分四栏+栏间有间距的例子分析 效果图: html代码: <div class="buy-one-buy"> <h3>淘一淘</h3> ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- CSS多种方式实现底部对齐
CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...
- HTML系列：js和css多种方式实现隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS多种方式实现元素水平垂直居中
html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS 实现：两栏布局（等宽布局）
☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
随机推荐
- 年视图，选择月份 ---bootstrap datepicker
$.fn.datepicker.dates['cn'] = { //切换为中文显示 days: ["周日", "周一", "周二", &qu ...
- Flume-日志聚合
Flume-1 监控文件 /tmp/tomcat.log. Flume-2 监控某一个端口的数据流. Flume-1 与 Flume-2 将数据发送给 Flume-3,Flume-3 将最终数据打印到 ...
- 阿里云AHAS应用高可用服务初体验
AHAS是阿里云提供的应用高可用服务(Application High Availability Service)产品. 高可用这个关键词可以说是互联网及软件开发行业热度一直很高的词语了,阿里云推出的 ...
- C++中.cpp和.hpp的区别
原文地址:https://blog.csdn.net/qzx9059/article/details/89210571 c++中 cpp和hpp我们可以将所有东西都放在一个.cpp文件内,编译器会将这 ...
- Android四层体系架构
Application应用层 应用是用Java语言编写的运行在虚拟机上的程序,即图中最上层的蓝色部分.手机的上层应用其实,Google最开始时就在Android系统中捆绑了一些核心应用比如e-mail ...
- Linux vi/vim命令
转自:http://www.runoob.com/linux/linux-vim.html Linux vi/vim 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一 ...
- flutter 安卓再次点击返回退出应用
安卓手机点击实体或者虚拟返回键,会返回上一级,当到达最上层是,点击返回退出应用,为了防止用户连续点击返回,导致应用退出,在用户点击返回到最上层时,如果再次点击返回,第一次不退出,并提升用户再次点击退出 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类
笔记 6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类 简介:实战使用IDE根据Mysql自动生成java pojo实体类 1.IDEA连接数 ...
- mybatis低版本jsr310(LocalDateTime,LocalDate等) Joda Time支持
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybati ...
- linux下的缓存机制buffer、cache、swap
一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...