最近在用wordpress写页面时，设计师给出了一种网页排布图样，之前从未遇到过，其在电脑上（分辨率大于768px）的效果图如下：

而在手机（分辨率小于等于768px）上要求这样排列：

我想到了两种方法

第一种是用bootstrap的row、col-md配合col-md-push、col-md-pull来实现，代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1">
  6.      <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">
  7.      <title>div左右交叉布局--文字和图片交叉</title>
  8.    </head>
  9.    <body>
  10.  <style>
  11.  .C {
  12.    margin: auto;
  13.    padding: 30px 20px 40px;
  14.    max-width: 600px;
  15.  }
  16.  .I {
  17.    width: 100%;
  18.  }
  19.  .IW, .TW {
  20.    border: 1px solid rgba(0, 0, 0, 0.3);;
  21.  }
  22.  .TW {
  23.    padding: 25%;
  24.  }
  25.  </style>
  26.  <div class="C">
  27.    <div class="row">
  28.      <div class="col-md-6">
  29.        <div class="IW">
  30.          <img class="I" src="../../asset/images/flex/r1.jpg" alt="">
  31.        </div>
  32.      </div>
  33.      <div class="col-md-6">
  34.        <div class="TW">我是文字，我用到了padding来实现大致居中</div>
  35.      </div>
  36.    </div>
  37.    <div class="row">
  38.      <div class="col-md-6 col-md-push-6">
  39.        <div class="IW">
  40.          <img class="I" src="../../asset/images/flex/r1.jpg" alt="">
  41.        </div>
  42.      </div>
  43.      <div class="col-md-6 col-md-pull-6">
  44.        <div class="TW">我是文字，我用到了padding来实现大致居中</div>
  45.      </div>
  46.    </div>
  47.    <div class="row">
  48.      <div class="col-md-6">
  49.        <div class="IW">
  50.          <img class="I" src="../../asset/images/flex/r1.jpg" alt="">
  51.        </div>
  52.      </div>
  53.      <div class="col-md-6">
  54.        <div class="TW">我是文字，我用到了padding来实现大致居中</div>
  55.      </div>
  56.    </div>
  57.  </div>
  58.    </body>
  59.  </html>

电脑上效果：

手机上效果：

用bootstrap这种方法需要写多个row（我试着用一个row来实现，但没成功），另外需要注意的就是，在col-md这层，最好不要再另外添加类（样式），如果需要控制里层的元素（上面的例子中是图片和文字），比如加个padding之类的，可以再加一层div来写样式。

第二种方法用flex布局中的flex-direction: row-reverse来实现，代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1">
  6.      <title>div左右交叉布局--文字和图片交叉</title>
  7.    </head>
  8.    <body>
  9.  <style>
  10.    .C {
  11.      margin: auto;
  12.      padding: 30px 20px 40px;
  13.      max-width: 600px;
  14.    }
  15.    .R {
  16.      display: block;
  17.      width: 100%;
  18.    }
  19.    @media only screen and (min-width: 768px) {
  20.      .R {
  21.        display: flex;
  22.        width: 100%;
  23.      }
  24.    }
  25.    .R:nth-child(even) {
  26.      flex-direction: row-reverse;
  27.    }
  28.    .I, .W {
  29.      width: 50%;
  30.    }
  31.    .I img {
  32.      width: 100%;
  33.    }
  34.    .W {
  35.      display: flex;
  36.      flex-direction: column;
  37.      font-size: 16px;
  38.      justify-content: center;
  39.    }
  40.  </style>
  41.  <div class="C">
  42.    <div class="R">
  43.      <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>
  44.      <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>
  45.    </div>
  46.    <div class="R">
  47.      <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>
  48.      <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>
  49.    </div>
  50.    <div class="R">
  51.      <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>
  52.      <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>
  53.    </div>
  54.  </div>
  55.    </body>
  56.  </html>

电脑上效果如下：

手机上效果如下：

可以看到，用flex实现要灵活一些， 所有的div都按row排列，其中的关键在于让偶数行反向排列： .R:nth-child(even) { flex-direction: row-reverse; } ，然后在手机上让其正常排列即可 .R { display: block; width: 100%; } 。

我还发现，用flex可以很容易的实现两个div底部对齐，具体代码如下：

  1. .C {
  2.   display: flex;
  3.   align-items: flex-end;
  4. }
  5. .A {
  6.   background: rgba(255, 0, 0, 0.1);
  7. }
  8. .A:nth-child(odd) {
  9.   background: #1a88ea;
  10.   color: white;
  11.   font-size: 30px;
  12.   padding: 10px 15px;
  13. }
  14. </style>
  15. <div class="C">
  16.   <div class="A">创新</div>
  17.   <div class="A">实验基地</div>
  18. </div>

其实就是让C内的div，以主轴为x（按row排列时，主轴即为x，未指明flex-diretion时，默认为按row排列），排布方向为row，然后让div都在y轴(交叉轴)上处于底部 align-items: flex-end;

效果如下：

当然，也可以用其他方法来实现。比如，让C相对定位，让C内其中的一个div绝对定位，然后通过设置bottom为0即可，代码如下，效果同上。

  1. <style media="screen">
  2. .C {
  3.   position: relative;
  4. }
  5. .A {
  6.   display: inline-block;
  7.   background: rgba(255, 0, 0, 0.1);
  8. }
  9. .A:nth-child(odd) {
  10.   background: #1a88ea;
  11.   color: white;
  12.   font-size: 30px;
  13.   padding: 10px 15px;
  14. }
  15. .A:nth-child(even) {
  16.   bottom: 0;
  17.   position: absolute;
  18. }
  19. </style>
  20. <div class="C">
  21.   <div class="A">创新</div>
  22.   <div class="A">实验基地</div>
  23. </div>

不过显然，用flex实现更加简便。

ps: 我这篇博客快写完时，chrome崩溃了5次，不知道是输入法的原因，还是chrome自己的原因，反正一输入字符就自动退出。

CSS布局之div交叉排布与底部对齐--flex实现的更多相关文章

  1. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 实现LinearLayout（垂直布局，Gravity内容排布）

    首先上Gravity的代码,Android原版的Gravity搞得挺复杂的,太高端了.但基本思路是使用位运算来做常量,我就自己消化了一些,按自己的思路来实现. 先上代码,在做分析. package k ...

  3. css 行内水平均等排布方式

    <div class="justify"> <span>测试1</span> <span>测试2</span> < ...

  4. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  5. CSS布局，div居中，文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  6. div+css布局记扎

    实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...

  7. div+css布局自适应小结

    一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...

  8. css布局知识点汇总

    昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...

  9. CSS多种方式实现底部对齐

    CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...

随机推荐

  1. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

  2. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  3. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  4. 十分钟玩转 jQuery、实例大全

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

  5. [原] KVM 虚拟化原理探究（6）— 块设备IO虚拟化

    KVM 虚拟化原理探究(6)- 块设备IO虚拟化 标签(空格分隔): KVM [toc] 块设备IO虚拟化简介 上一篇文章讲到了网络IO虚拟化,作为另外一个重要的虚拟化资源,块设备IO的虚拟化也是同样 ...

  6. ASP.NET Core 中文文档 第四章 MVC（4.4）依赖注入和控制器

    原文: Dependency Injection and Controllers 作者: Steve Smith 翻译: 刘浩杨 校对: 孟帅洋(书缘) ASP.NET Core MVC 控制器应通过 ...

  7. 浅谈Slick（2）－ Slick101：第一个动手尝试的项目

    看完Slick官方网站上关于Slick3.1.1技术文档后决定开始动手建一个项目来尝试一下Slick功能的具体使用方法.我把这个过程中的一些了解和想法记录下来和大家一起分享.首先我用IntelliJ- ...

  8. 微信小程序体验(1)：携程酒店机票火车票

    在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...

  9. Android中访问sdcard路径的几种方式

    以前的Android(4.1之前的版本)中,SDcard路径通过"/sdcard"或者"/mnt/sdcard"来表示,而在JellyBean(安卓4.1)系统 ...

  10. IOS之Objective-C学习 ARC下的单例模式

    单例模式是我常用的一种设计模式,最常见的用途就是用来保存数据并且传递数据.这都归功于单例模式的特性,首先就让我为大家简单介绍一下单例模式的特性. 单例模式的三大特性: 1.某个类只能有一个实例: 2. ...