CSS布局之div交叉排布与底部对齐--flex实现
最近在用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实现的更多相关文章
- CSS布局：div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 实现LinearLayout（垂直布局，Gravity内容排布）
首先上Gravity的代码,Android原版的Gravity搞得挺复杂的,太高端了.但基本思路是使用位运算来做常量,我就自己消化了一些,按自己的思路来实现. 先上代码,在做分析. package k ...
- css 行内水平均等排布方式
<div class="justify"> <span>测试1</span> <span>测试2</span> < ...
- CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- CSS布局，div居中，文字居中
.main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- div+css布局自适应小结
一.两栏布局(左定宽,右自动)1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度.举例: &l ...
- css布局知识点汇总
昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...
- CSS多种方式实现底部对齐
CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...
随机推荐
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- RabbitMq应用二
在应用一中,基本的消息队列使用已经完成了,在实际项目中,一定会出现各种各样的需求和问题,rabbitmq内置的很多强大机制和功能会帮助我们解决很多的问题,下面就一个一个的一起学习一下. 消息响应机制 ...
- Entity Framework Core 1.1 升级通告
原文地址:https://blogs.msdn.microsoft.com/dotnet/2016/11/16/announcing-entity-framework-core-1-1/ 翻译:杨晓东 ...
- eclipse 快捷键大全
注:因eclipse版本.电脑配置等原因 有些快捷键可能导致不可用(遇到些许问题可在下方评论) [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 此快捷键为用户编辑的好帮手,能为 ...
- solr_架构案例【京东站内搜索】(附程序源代码)
注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...
- CentOS7 重置root密码
1- 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4 - 现在按下 Con ...
- angular2系列教程（七）Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- php报错 ----> Call to undefined function imagecreatetruecolor()
刚才在写验证码的时候,发现报错,然后排查分析了一下,原来是所用的php版本(PHP/5.3.13)没有开启此扩展功能. 进入php.ini 找到extension=php_gd2.dll ,将其前面的 ...
- 【热门技术】EventBus 3.0，让事件订阅更简单，从此告别组件消息传递烦恼~
一.写在前面 还在为时间接收而烦恼吗?还在为各种组件间的消息传递烦恼吗?EventBus 3.0,专注于android的发布.订阅事件总线,让各组件间的消息传递更简单!完美替代Intent,Handl ...
- 纸箱堆叠 bzoj 2253
纸箱堆叠 (1s 128MB) box [问题描述] P 工厂是一个生产纸箱的工厂.纸箱生产线在人工输入三个参数 n, p, a 之后,即可自动化生产三边边长为 (a mod P, a^2 mod p ...