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: ...
随机推荐
- AcWing：178. 第K短路（A*）
给定一张N个点(编号1,2…N),M条边的有向图,求从起点S到终点T的第K短路的长度,路径允许重复经过点或边. 注意: 每条最短路中至少要包含一条边. 输入格式 第一行包含两个整数N和M. 接下来M行 ...
- Codeforces 1051 D.Bicolorings（DP）
Codeforces 1051 D.Bicolorings 题意:一个2×n的方格纸,用黑白给格子涂色,要求分出k个连通块,求方案数. 思路:用0,1表示黑白,则第i列可以涂00,01,10,11,( ...
- 【java设计模式】-02工厂模式
工厂模式简述 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客 ...
- vue 源码解析computed
计算属性 VS 侦听属性 Vue 的组件对象支持了计算属性 computed 和侦听属性 watch 2 个选项,很多同学不了解什么时候该用 computed 什么时候该用 watch.先不回答这个问 ...
- Python选择指定文件夹的文件然后复制出其中几个文件到新的文件夹
""" 要求: 1.读取cdm文件的所有子文件夹,然后每个文件夹里面是抽出一个一个mp3后缀的文件. 遍历所有的子文件,然后将这些mp3文件,保存到一个新的文件夹.文件夹 ...
- 笔记：Hive的主要技术改进（Major Technical Advancements in Apache Hive）
http://web.cse.ohio-state.edu/hpcs/WWW/HTML/publications/papers/TR-14-2.pdf (辅助参考:https://cwiki.apa ...
- requests和BeautifulSoup模块的使用
用python写爬虫时,有两个很好用第三方模块requests库和beautifulsoup库,简单学习了下模块用法: 1,requests模块 Python标准库中提供了:urllib.urllib ...
- SQL-W3School-基础：SQL 教程
ylbtech-SQL-W3School-基础:SQL 教程 1.返回顶部 1. SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您将学到如何使用 SQL 访问和处理数据系统中的数据, ...
- C# 批处理制作静默安装程序包
使用批处理+WinRAR制作静默安装程序包 @echo 安装完窗口会自动关闭!!! @echo off start /wait Lync.exe /Install /Silent start /wai ...
- 012-数据结构-树形结构-哈希树[hashtree]、字典树[trietree]、后缀树
一.哈希树概述 1.1..其他树背景 二叉排序树,平衡二叉树,红黑树等二叉排序树.在大数据量时树高很深,我们不断向下找寻值时会比较很多次.二叉排序树自身是有顺序结构的,每个结点除最小结点和最大结点外都 ...