自适应的多列图文混排改进
关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多,那是你举一反三,不是本文讨论的重点。你也可以先看一下最终的示例页面。
开始之前,首先来看一下我们的需求:
- 一个通用的结构,可以放在不同宽度的布局列中;
- 该结构基本构成为左图(头像)右文(多种结构),左右宽度均不固定;
- 左栏宽度由内容最小宽度确定,右栏无论内容多少要占满容器剩余宽度;
- 右栏可能有定位元素超出自身范围,要予以显示,且右栏的内容不能环绕左栏;
- 右栏中可能会再包含浮动,因此右栏需要清除自身内容的浮动。 实际上针对类似需求,网上也有不少方案,建议参考阅读
这篇长文以及涛哥简练实用的自适应的图文混排。根据需求,我们能确定出最基本的结构:
<div class="img-txt">
<div class="img">左图</div>
<div class="txt">右文</div>
</div>
安装两列布局的传统做法,我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。但是再对比一下需求,右栏的特性否决了两栏都浮动的方式,左栏的宽度不固定否定了负边距的方式。左栏浮动加右栏左边距将会遭遇[cref bfc-element-margin-bug-in-webkit webkit核心浏览器的BFC元素边距bug]。 所以我们只能选择左栏浮动(浮动元素宽度最小,内容可以撑开),右栏不浮动(不浮动的block元素默认占满行宽)。但是不浮动的右栏既不能环绕左栏,又不能加左边距。怎么办?理所当然的就该想到BFC元素了。
涛哥的方案就是这样出来的。我们在腾讯朋友的项目中已经非常大量地实践了这种方案,效果不错。该方案的核心是右栏通过overflow:hidden来创建一个块级上下文(Block Formatting Context),这样同时满足了右栏宽高自适应和不环绕左栏两个需求,我的方案也是在此之上的一个改进。 既然已经有了经过实践验证的方案,为什么要改进呢?因为我们在实践中也遇到了一些麻烦,那就是右栏中的复杂内容,复杂到会有溢出容器的浮层。但是overflow:hidden的存在迫使我们必须把右栏里的定位元素放到右栏结构之外。虽然能解决问题,但是结构上就不符合逻辑了。 所以我们的需求可以抽象为两点:一、创建块级上下文;二、不能使用overflow:hidden。前几天我翻译了一篇文章在[cref the-hacktastic-zoom-fix-translation 非IE浏览器中模拟zoom创建块级上下文],恰好解决了这个矛盾——在IE中用zoom创建块级上下文,在其它浏览器中模拟IE的zoom创建块级上下文。 回到我们的结构中来说: * img-txt要清除浮动(否则当右栏高度小于左栏时,img-txt的高度撑不开),关于清除浮动的方式,之前已经给出了[cref clearfix-reloaded-overflowhidden-demystified-translation 改进的方案]。 * img要左浮动,img和txt之间的距离只能加在img上(原因之前说了,webkit的bug)。 * txt要创建BFC,要清除浮动(这两个问题在模拟zoom的时候一并解决了)。 有了这些前提,我的方案得来全不费功夫。首先是img-txt容器清除浮动:
.img-txt:before,
.img-txt:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.img-txt:after {clear: both;}
.img-txt {zoom: 1;}
然后是img的左浮动加右边距(注意IE6的3像素文本慢移bug):
.img {
float:left;
margin-right:10px;
_margin-right:7px;
}
然后,txt创建BFC,同时清除自身子元素的浮动:
.txt {
display:table-cell;
#zoom:1;
}
.txt:after {
clear: both;
display: block;
visibility: hidden;
overflow: hidden;
height: 0 !important;
line-height: 0;
font-size: xx-large;
content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
行了。现在这个结构就可以搬到网页上的任意地方去,右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好,都能胜任了。现在如果你再看一下示例页面,你应该会更容易理解这些例子了。 感谢涛哥,推荐了如此精彩的几篇文章让我翻译。
- 关于修改数据库参数的测试(r3笔记第18天)
- 50多条实用mysql数据库优化建议
- 关于查询转换的一些简单分析(一) (r3笔记第37天)
- 简单实用的sql小技巧(第一篇) (r3笔记第36天)
- 关于修改分区表的问题总结 (r3笔记35天)
- 利用Python绘制MySQL数据图实现数据可视化
- 生产环境sql语句调优实战第九篇(r3笔记第34天)
- python数据分析之股票实战
- 使用Python编写网络爬虫抓取视频下载资源
- 通过shell定制ash脚本(r3笔记第33天)
- 使用shell定制awr脚本(r3笔记第32天)
- 用python对人们使用自行车情况分析与预测
- 由一条sql语句导致的系统IO问题(r3笔记第31天)
- 关于正则表达式第二篇(r3笔记第30天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Maven Archetype创建Java项目模板
- left join左表一定是驱动表吗?
- OneFlow快速上手教程
- [译]HAL-超文本应用语言
- OneFlow | 新深度学习框架后浪(附源代码)
- 居民身份证阅读器产品开发学习心得(再谈标准-软件-协议)
- Spring Data REST不完全指南(一)
- Cocos2d-js中的简易MVC框架(五)MVC框架的使用
- [译]谈谈SpringBoot 事件机制
- C++ 模板沉思录(下)
- Cocos2d-js中的简易MVC框架(四)显示层View
- 如何在去中心化交易所中(DEX)集成0x协议
- Spring Data REST不完全指南(二)
- Cocos2d-js中的简易MVC框架(三)中介者Mediator
- Cocos2d-js中的简易MVC框架(二)数据模型Model