前言

在实际开发中，我们经常会想要实现的一种布局方式就是三栏等分布局，那么我们如何来解决这个问题呢？

解决

方法一：flex

外层容器也就是ul设置display:flex，对项目也就是li设置flex：auto，代表 flex: 1 1 auto

<style>

        * {

            list-style: none;

            border: ;

            padding: ;

            margin:

        }

        ul {

            width: 500px;

            height: 200px;

            background: red;

            display: flex; 

            margin: auto;

            margin-top: 100px;

            padding:  10px;

            align-items: center;

        }

        li {

            background: green;

            height: 100px;

            width: 500px;

            display: inline-block;

            margin: 2px;
            line-height: 100px;
            text-align: center;
　　　　　　　flex: auto
        }

</style>
<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

效果图：

解析：我们注意到width的设置，外层ul是500，li也是500，但是实际看到的确实li平分了ul的宽度，这是因为设置了flex：auto，代表有剩余空间的话项目等分剩余空间放大，空间不足项目等比例缩小

方法二：flex

同上，只不过将flex设置为 1 1 33.33%

<style>

        * {

            list-style: none;

            border: ;

            padding: ;

            margin:

        }

        ul {

            width: 500px;

            height: 200px;

            background: red;

            display: flex; 

            margin: auto;

            margin-top: 100px;

            padding:  10px;

            align-items: center;

        }

        li {

            background: green;

            height: 100px;

            width: 500px;

            display: inline-block;

            margin: 2px;

            line-height: 100px;

            text-align: center;

　　　　 　　 flex: 1 1 33.33%;

        }

</style>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

效果图：

flex实现三栏等分布局的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  3. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  4. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  5. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  6. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

  7. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  8. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  9. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

随机推荐

  1. python 基础操作--数据类型

    一.变量 1.定义:将运算的中间结果暂存到内存,以便后续程序调用. 2.命名规则 1.变量由字母.数字.下划线搭配组合而成: 2.不可以用数字开头,也不能全都是数字: 3.不能是python 关键字, ...

  2. 设计模式のBridgePattern（桥接模式）----结构模式

    一.产生背景 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体 ...

  3. Insert Into 语句的语法错误

    错误示意: 一开始程序是: 改正: 一条很简单的插入语句竟然会报错,然而直接在数据库的查询中执行中却没有问题,这个问题困扰了不少时间. 数据库使用的是ACCESS,INSERT INTO语句为inse ...

  4. LDAP概念和原理

    LDAP概念和原理介绍 相信对于许多的朋友来说,可能听说过LDAP,但是实际中对LDAP的了解和具体的原理可能还比较模糊,今天就从“什么是LDAP”.“LDAP的主要产品”.“LDAP的基本模型”.“ ...

  5. CSAPP：第三章程序的机器级表示3

    程序的机器级表示3 关键点:过程.调试.指针 过程1.运行时栈2.转移控制3.数据传递4.栈上的局部存储5.寄存器中的局部存储空间理解指针使用GDB调试器 过程 1.运行时栈   x86-64的栈向低 ...

  6. P1433 吃奶酪（搜索DFS+记忆化）

    emmmmm,我还是看了题解的....尴尬,其实不用记忆化搜索也是可以的.因为我不用也是最后一个点超时.但是我是用的贪心+DFS...超时的原因是贪心....mmp,本来加贪心就是为了不超时.... ...

  7. 破解windows版idea

    近期使用idea的时候提示已过试用期,需要购买,否则只能使用半小时 网上破解方法很全,记录一下 1.下载破解补丁 百度网盘:https://pan.baidu.com/s/15Wq9-c4SVwg_2 ...

  8. Linux进程管理 (篇外)内核线程简要介绍

    关键词:kthread.irq.ksoftirqd.kworker.workqueues 在使用ps查看线程的时候,会有不少[...]名称的线程,这些有别于其它线程,都是内核线程. 其中多数内核线程从 ...

  9. object detection[rfcn]

    0 - 背景 从rcnn,spp,fast rcnn, faster rcnn,yolo,ssd,这里又有个新模型叫rfcn,即Region-based Fully Convolutional Net ...

  10. Recurrent Neural Network[Content]

    下面的RNN,LSTM,GRU模型图来自这里 简单的综述 1. RNN 图1.1 标准RNN模型的结构 2. BiRNN 3. LSTM 图3.1 LSTM模型的结构 4. Clockwork RNN ...