<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <style>

        body{

            margin: 0;

            padding: 0;

        }

        #contentBody{

            display: -webkit-box;

            -webkit-box-orient: Horizontal;/*默认为横向排列*/

            /*-webkit-box-orient:vertical;*/

        }

        #left{

            /*-宽度自适应*/

            -webkit-box-flex: 1;

            background-color: red;

        }

        #center{

            /*正常width*/

            -webkit-box-flex: 1;

            background-color: gray;

        }

        #right{

            -webkit-box-flex: 1;

            background-color: greenyellow;

        }

    </style>

</head>

<body>

<div id="contentBody">

    <div id="left">

        <ul>

            <li>sad</li>

            <li>阿斯顿</li>

            <li>似懂非懂</li>

            <li>发个好地方</li>

            <li>给发货人</li>

            <li>uisgbdd</li>

        </ul>

    </div>

    <div id="center">

        <p style=" text-indent: 2em;">东方市国土海洋突然反悔的风格火热你的风格和对方谈话我让他怀疑是个电话吧asdfsadggh负担和感情而过去而地擦拭地方</p>

    </div>

    <div id="right"> <ul>

        <li>是的方法</li>

        <li>阿斯顿</li>

        <li>似大师傅赶得上风格懂非懂</li>

        <li>发个好地方</li>

        <li>给发货人</li>

        <li>uisg对方感到附属国bdd</li>

    </ul></div>

</div>

</body>

</html>

　　

CSS弹性盒布局的更多相关文章

  1. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  2. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  3. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  4. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  5. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  6. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  7. CSS3与弹性盒布局

    1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...

  8. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  9. CSS3-box-flex弹性盒布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 最短路(Bellman_Ford) POJ 3259 Wormholes

    题目传送门 /* 题意:一张有双方向连通和单方向连通的图,单方向的是负权值,问是否能回到过去(权值和为负) Bellman_Ford:循环n-1次松弛操作,再判断是否存在负权回路(因为如果有会一直减下 ...

  2. LightOJ1032 Fast Bit Calculations（数位DP）

    显然数位DP. dp[i][j]表示所有末尾为j的i位二进制数相邻位的数量和 初始状态dp[2][1]=1 从长度i-1转移到长度i就是在i-1位的末尾添上0或1,转移方程就是: dp[i][0]=d ...

  3. Piggy-Bank[HDU1114]

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. Git 远程操作详解

    Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...

  5. Linq To Objects

    一.什么是Linq To Objects 从根本上说,Linq To Objects表示一种新的处理集合的方法.采用旧方法,必须编写指定如何从集合检索数据的复杂的foreach循环.而采用Linq方法 ...

  6. 【BZOJ】2463: [中山市选2009]谁能赢呢？（博弈论）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2463 好神的证明! 首先对于n是偶数,一定能被1*2的骨牌覆盖!所以从起点开始,先手一定走的是骨牌的 ...

  7. HttpClient_用Apache HttpClient实现URL重定向

    很多网站都使用了URL重定向技术,把一个原始请求从一个位置路由到另一个位置.原因可能是多方面的,比如域名转发.URL缩写.隐私保护.在同一网站维持相似的域名等.本文讲述怎样使用Apache HTTPC ...

  8. hdu acm steps Big Event in HDU

    上网搜了一下这道题的解法,主要有两个方法,一种是采用母函数的方法,一种是采用0/1背包的方法. 先说一下母函数,即生成函数,做个比喻,母函数就是一个多项式前面的系数的一个整体的集合,而子函数就是这个多 ...

  9. Redis Cluster 3.0搭建与使用

    Redis Cluster终于出了Stable,这让人很是激动,等Stable很久了,所以还是先玩玩. 一. 集群简单概念. Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施( ...

  10. 结合计划任务每天从Symantec官网下载离线病毒库

    #三种方法,由初级到高级 $numbers = 1..40 | Foreach {"{0:D3}" -f $_} #将数字类型格式化并转换为字符串类型使用-f字符串操作符 ForE ...