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: ...
随机推荐
- 【BZOJ3098】 Hash Killer II
BZOJ3098 Hash Killer II Solution 这道题目好像题面里面给了提示(当然没给就有点难想了.) 曾经讲过一个叫做生日悖论的,不知道还有多少人记得 考虑相同的可能性大概是\(\ ...
- 【sed】基本用法
1. 文本处理 sed编辑器根据sed命令处理数据流中的数据:在流编辑器将所有命令与一行数据匹配完后,它会读取下一行数据并重复以下过程: (1) 一次从输入中读取一行数据 (2) 根据所提供的编辑器命 ...
- shell [ ] 和 [[ ]] 区别
[参考文章]:shell if [[ ]]和[ ]区别 || && [参考文章]:Shell test 命令 1. [ ] 和 test test 等同于 [ ] 可用于判断某个条件 ...
- 深入学习golang中new与make区别
Go语言中的内建函数new和make是两个用于内存分配的原语(allocation primitives).对于初学者,这两者的区别也挺容易让人迷糊的.简单的说,new只分配内存,make用于slic ...
- margin padding border
Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...
- HelloWorld入门代码
A:定义类 B:写main方法 C:写输出语句 D:Java程序开发运行与工作原理 E:编译和运行程序 class HelloWorld { public static void main(Strin ...
- 01 MySQL之数据库基本操作
01-介绍 数据库(DataBase,DB)是一个长期存储在计算机内的.有组织的.有共享的.统一管理的数据集合. 02-基本操作 2.1 创建数据库 # 查看当前所有的数据库 show databas ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-3.在线教育站点需求分析和架构设计
笔记 3.在线教育站点需求分析和架构设计 简介:分析要开发的功能点和系统架构应该怎样架构 1.开发的功能: 首页视频列表 ...
- 一百一十九：CMS系统之将短信验证码和图形验证码放到memcached缓存中
将两个验证码的视图都放到common蓝图下 from flask import Blueprint, request, make_responsefrom exts import alidayufro ...
- Java集合(2)：两个生成器的例子：Collection生成器CollectionData及Map生成器MapData
Collection生成器CollectionData CollectionData体现了适配器模式的设计思想,它能把实现Generator接口的类的对象(包括上一章数组中的各种RandomGener ...