专栏首页PHP 开发自适应的多列图文混排改进

自适应的多列图文混排改进

关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多,那是你举一反三,不是本文讨论的重点。你也可以先看一下最终的示例页面

开始之前,首先来看一下我们的需求:

  1. 一个通用的结构,可以放在不同宽度的布局列中;
  2. 该结构基本构成为左图(头像)右文(多种结构),左右宽度均不固定;
  3. 左栏宽度由内容最小宽度确定,右栏无论内容多少要占满容器剩余宽度;
  4. 右栏可能有定位元素超出自身范围,要予以显示,且右栏的内容不能环绕左栏;
  5. 右栏中可能会再包含浮动,因此右栏需要清除自身内容的浮动。 实际上针对类似需求,网上也有不少方案,建议参考阅读

这篇长文以及涛哥简练实用的自适应的图文混排。根据需求,我们能确定出最基本的结构:

<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 ";
}

  行了。现在这个结构就可以搬到网页上的任意地方去,右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好,都能胜任了。现在如果你再看一下示例页面,你应该会更容易理解这些例子了。 感谢涛哥,推荐了如此精彩的几篇文章让我翻译。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 禁用Firefox自带的元素查看工具

    对于web前端工程师来说,用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今,新版本的Firefox中又内嵌了一...

    小李刀刀
  • [译]Laravel 5.0 之 Middleware (Filter-Style)

    本文译自 Matt Stauffer 的系列文章. ---- 如果你有阅读我之前的 Laravel 5.0 系列文章,你可能已经注意到路由过滤器(route f...

    小李刀刀
  • CentOS 7 开启 BBR 加速

    Google 在 2016年9月份开源了他们的优化网络拥堵算法BBR,最新版本的 Linux内核(4.9-rc8)中已经集成了该算法。 对于TCP单边加速,并非...

    小李刀刀
  • Seesaw Loss:一种面向长尾目标检测的平衡损失函数

    链接:https://zhuanlan.zhihu.com/p/339126633

    CV君
  • 【源头活水】Seesaw Loss:一种面向长尾目标检测的平衡损失函数

    “问渠那得清如许,为有源头活水来”,通过前沿领域知识的学习,从其他研究领域得到启发,对研究问题的本质有更清晰的认识和理解,是自我提高的不竭源泉。为此,我们特别精...

    马上科普尚尚
  • 超全的 Linux 机器的渗透测试命令备忘表,共16表128条命令

    如下是一份 Linux 机器的渗透测试备忘录,是在后期开发期间或者执行命令注入等操作时的一些典型命令,设计为测试人员进行本地枚举检查之用。 系统信息命令 对于...

    小小科
  • LeetCode - 反转字符串中的单词③

    LeetCode第557题,难度是简单,一个月三周以前刷的题目。突然意识到,我真的已经又是一个月没有写过LeetCode了,又变懒了,勤奋果然大都是暂时的。

    晓痴
  • 用NW.js构建跨平台桌面应用(2)-原生界面API

    实际取得的值( 表示manifest文件中配置的应用名 ): - Win: $LOCALAPPDATA%/<name> - Linux: ~/.config/<...

    江米小枣
  • Linux基础知识总结

    ###一:什么是Linux? Linux被称为类Unix操作系统,遵循POSIX标准。Linux与Unix的最大不同在于源代码的开放性和自由性。 Linux的发...

    用户1214695
  • 《调教命令行01》选Linux发行版,就像挑女朋友

    看着这根黑漆漆的韭菜,他陷入了沉思。小王是一个运维工程师,每时每刻都在面对着黑漆漆的窗口。屏幕上的字符在滚动,他经常对着字符后面那片纯色发呆。几百万像素的屏幕上...

    xjjdog

扫码关注云+社区

领取腾讯云代金券