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. 基于Memcached的tomcat集群session共享所用的jar

    多个tomcat各种序列化策略配置如下:一.java默认序列化tomcat配置conf/context.xml添加<Manager className="de.javakaffee.w ...

  2. LaTeX技巧207：使用align环境输入多行公式的技巧

    align是输入多行公式中最好用的环境,仅仅是个人浅见,因为他的对齐非常灵活,如果大家需要非常灵巧的对齐方式的多行公式,建议使用align环境,对应的也还有align*和aligned等等类似的环境, ...

  3. DAU预测

    转自: http://www.kaixin001.com/repaste/80488684_6910412734.html 我们知道在所有的游戏运营数据中,最终要的两个数据莫过于DAU.ARPU了.| ...

  4. django的mysql设置和mysql服务器闲置时间设置

    服务器启动后,每个进程都会主动连接到mysql,要是长时间没有数据交互,mysql会自动断开连接. show variables like  '%timeout%'; 闲置连接的超时时间由wait_t ...

  5. IDEA重写toString()模板，转成json格式

    1.类中Alt + Insert,弹出下框 2.点击新增 public java.lang.String toString() { final java.lang.StringBuilder sb = ...

  6. 样条之拉格朗日Lagrange(一元全区间)插值函数

    这是使用拉格朗日插值函数生成的样条曲线.在数值分析中,拉格朗日插值法是以法国十八世纪数学家约瑟夫·拉格朗日命名的一种多项式插值方法.许多实际问题中都用函数来表示某种内在联系或规律,而不少函数都只能通过 ...

  7. osg for android学习之一：windows下编译(亲测通过)【转】

    1. 首先需要一个OSG for android的环境 (1)NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一):新 ...

  8. iOS开发-UISwipeGestureRecognizer滑动手势

    滑动手势也算是iOS中交互中很重要的一部分,上下左右滑动,UISwipeGestureRecognizer可以很轻松的解决这个问题,没什么难度直接看代码吧: UISwipeGestureRecogni ...

  9. 服务器主体 "sa" 无法在当前安全上下文下访问数据库 XXX[SQLSTATE 08004] (错误 916). 该步骤失败。

    作业脚本为use XXX go 修改为选择XXX数据库

  10. Android -- Handling back button press Inside Fragments

    干货(1) 首先创建一个抽象类BackHandledFragment,该类有一个抽象方法onBackPressed(),所有BackHandledFragment的子类在onBackPressed方法 ...