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

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

我想到了两种方法

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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

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

     <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">

     <title>div左右交叉布局--文字和图片交叉</title>

   </head>

   <body>

 <style>

 .C {

   margin: auto;

   padding: 30px 20px 40px;

   max-width: 600px;

 }

 .I {

   width: 100%;

 }

 .IW, .TW {

   border: 1px solid rgba(0, 0, 0, 0.3);;

 }

 .TW {

   padding: 25%;

 }

 </style>

 <div class="C">

   <div class="row">

     <div class="col-md-6">

       <div class="IW">

         <img class="I" src="../../asset/images/flex/r1.jpg" alt="">

       </div>

     </div>

     <div class="col-md-6">

       <div class="TW">我是文字，我用到了padding来实现大致居中</div>

     </div>

   </div>

   <div class="row">

     <div class="col-md-6 col-md-push-6">

       <div class="IW">

         <img class="I" src="../../asset/images/flex/r1.jpg" alt="">

       </div>

     </div>

     <div class="col-md-6 col-md-pull-6">

       <div class="TW">我是文字，我用到了padding来实现大致居中</div>

     </div>

   </div>

   <div class="row">

     <div class="col-md-6">

       <div class="IW">

         <img class="I" src="../../asset/images/flex/r1.jpg" alt="">

       </div>

     </div>

     <div class="col-md-6">

       <div class="TW">我是文字，我用到了padding来实现大致居中</div>

     </div>

   </div>

 </div>

   </body>

 </html>

电脑上效果：

手机上效果：

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

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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

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

     <title>div左右交叉布局--文字和图片交叉</title>

   </head>

   <body>

 <style>

   .C {

     margin: auto;

     padding: 30px 20px 40px;

     max-width: 600px;

   }

   .R {

     display: block;

     width: 100%;

   }

   @media only screen and (min-width: 768px) {

     .R {

       display: flex;

       width: 100%;

     }

   }

   .R:nth-child(even) {

     flex-direction: row-reverse;

   }

   .I, .W {

     width: 50%;

   }

   .I img {

     width: 100%;

   }

   .W {

     display: flex;

     flex-direction: column;

     font-size: 16px;

     justify-content: center;

   }

 </style>

 <div class="C">

   <div class="R">

     <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>

     <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>

   </div>

   <div class="R">

     <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>

     <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>

   </div>

   <div class="R">

     <div class="I"><img src="../images/flex/r1.jpg" alt=""></div>

     <div class="W">我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。</div>

   </div>

 </div>

   </body>

 </html>

电脑上效果如下：

手机上效果如下：

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

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

.C {

  display: flex;

  align-items: flex-end;

}

.A {

  background: rgba(255, 0, 0, 0.1);

}

.A:nth-child(odd) {

  background: #1a88ea;

  color: white;

  font-size: 30px;

  padding: 10px 15px;

}

</style>

<div class="C">

  <div class="A">创新</div>

  <div class="A">实验基地</div>

</div>

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

效果如下：

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

<style media="screen">

.C {

  position: relative;

}

.A {

  display: inline-block;

  background: rgba(255, 0, 0, 0.1);

}

.A:nth-child(odd) {

  background: #1a88ea;

  color: white;

  font-size: 30px;

  padding: 10px 15px;

}

.A:nth-child(even) {

  bottom: 0;

  position: absolute;

}

</style>

<div class="C">

  <div class="A">创新</div>

  <div class="A">实验基地</div>

</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. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  2. 在离线环境中发布.NET Core至Windows Server 2008

    在离线环境中发布.NET Core至Windows Server 2008 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面作为测试,现在打算发布 ...

  3. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  4. Hive安装配置指北（含Hive Metastore详解）

    个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...

  5. OpenGL超级宝典笔记----框架搭建

    自从工作后,总是或多或少的会接触到客户端3d图形渲染,正好自己对于3d图形的渲染也很感兴趣,所以最近打算从学习OpenGL的图形API出发,进而了解3d图形的渲染技术.到网上查了一些资料,OpenGL ...

  6. PayPal高级工程总监：读完这100篇论文 就能成大数据高手（附论文下载）

    100 open source Big Data architecture papers for data professionals. 读完这100篇论文 就能成大数据高手 作者 白宁超 2016年 ...

  7. Entity Framework 手动使用migration里面的up 和down方法。

    add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...

  8. HttpPost过程中使用的URLEncoder.encode(something, encode)

    URLEncoder.encode("刘美美", "utf-8").toString()       =     %E5%88%98%E7%BE%8E%E7%B ...

  9. SpringMVC视图解析器

    SpringMVC视图解析器 前言 在前一篇博客中讲了SpringMVC的Controller控制器,在这篇博客中将接着介绍一下SpringMVC视 图解析器.当我们对SpringMVC控制的资源发起 ...

  10. windows 7（32/64位）GHO安装指南（U盘制作篇）~

    本篇接着上篇的介绍,为同学讲解U盘启动盘的制作.虽然本篇大白菜的官网上也有类似的教程,但是为了完整性,我将在这里为大家细细的讲解.在这里说一下,系统包和软件包的下载大家可以自行下载,很简单的,小主就不 ...