1、代码实现

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>css布局 三栏 自动换行</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .pp {

                width: 100%;

                overflow: hidden;

            }

            .c {

                float: left;

                width: 200px;

                border: 1px solid darkred;

                box-sizing: border-box;

            }

            .c+.c {

                /* 计算方式 (100%-200*3)/2 */

                margin-left: calc(50% - 300px);

            }

            /* 特殊处理 */

            .c:nth-of-type(3n+1) {

                margin-left: 0;

            }

        </style>

    </head>

    <body>

        <div class="pp">

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

            <div class="c">

                123

            </div>

        </div>

        <script type="text/javascript">

        </script>

    </body>

</html>

2、效果

css布局 三栏 自动换行的更多相关文章

  1. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  3. 基本CSS布局三

    基本CSS布局三------图片视频网格 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

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

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

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

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

  6. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

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

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

  8. 【CSS】三栏布局的经典实现

    要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...

  9. 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

随机推荐

  1. （转载）：ASCII，Unicode和UTF-8 编码

    UTF-8是Unicode的一种实现方式,也就是它的字节结构有特殊要求,所以我们说一个汉字的范围是0X4E00到0x9FA5,是指unicode值,至于放在utf-8的编码里去就是由三个字节来组织,所 ...

  2. JAVA中如何取得一个变量的类型

    class Test {public static void main(String[] args) {int i=1;System.out.println(getType(i));}public s ...

  3. Android系统版本与API等级对应关系表

    从Android官网拷过来的,方便查阅... 官网地址:https://developer.android.com/guide/topics/manifest/uses-sdk-element.htm ...

  4. Java(C#)基础差异-语法

    1.long类型 Java long类型,若赋值大于int型的最大值,或小于int型的最小值,则需要在数字后加L或者l,表示该数值为长整数,如long num=2147483650L. 举例如下: p ...

  5. [转]一次非常有意思的sql优化经历

    From :http://www.cnblogs.com/tangyanbo/p/4462734.html 补充:看到这么多朋友对sql优化感兴趣,我又重新补充了下文章的内容,将更多关于sql优化的知 ...

  6. [转]php-mobile-detect

    转自:http://www.oschina.net/p/php-mobile-detect php-mobile-detect (Mobile_Detect) 是一个 PHP 类,用来通过 User- ...

  7. Netty Associated -- ByteBuf

    ByteBuf ByteBuf是Netty的Server与Client之间通信的数据传输载体.他提供了一个byte数组(byte[])的抽象视图 buffer创建 我们推荐通过一个Unpooled的帮 ...

  8. 第二章 Base64与URLBase64

    2.1.算法基本规则: 加密的算法公开 加密的密钥不公开 Base64算法公开.密钥也公开的特性不符合基本算法规则,所以很容易被破解,所以一般不用于企业级的加密操作. 注意:具体的算法与密钥(对于Ba ...

  9. iOS开发-CocoaPods实战

    CocoaPods 是开发 OS X 和 iOS 应用程序的第三方库的依赖管理工具,如果是正常的开发不需要使用的第三方的代码,CocoaPods是不需要的,但是从实际情况上,为了提高开发效率,Coco ...

  10. 关于LINQ和SQL操作数据库的性能测试（转)

    微软linq技术已经出现很久,很多公司已经开始商业使用,作为我们暂时没有用到的人来说,也应该适当的了解下相关知识,但是直到目前网络上对他的看法仍然是褒贬不一,当然任何事情都不可能完美的,下面就针对大多 ...