div 等块级标签横向排列的方法总结

块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~

以下面这组 div 为例,wrap 的高度由内容撑开

平时是这样的,上下排列~

float 浮动

成功横向排列了,但是有几个问题~

float 的特点:

多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div 设置右浮动来解决。

脱离文档流,若父元素高度由内容撑开,那么就撑不开,从图中可以看到 wrap 没了,因为高度变为了 0,可通过清浮动来解决。

文字会环绕在浮动元素周围,图中未表现出来。

不能换行,图中未表现出来。

inline-block 行块标签

横排成功~但同样有些问题:

inline-block 特点:

元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙,常见的解决方案有:

通过给父元素设置 font-size: 0; ,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案: 

1.可以明确子元素内字体大小的,为其单独设置文字大小。

2。可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。

在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。

不用 inline-block,嘿嘿~

可以换行,如下图

flex 弹性盒模型

最爱的解决方案,给父元素设置 display: flex; 即可

效果图:

还可以通过 justify-content 属性调整子元素的水平对齐方式:

flex-start:

默认,图同上。

flex-end:

center:

space-around:

space-between:

不过当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。

通过 flex-wrap 属性可以使其换行,该值有三个取值 nowrap、 wrap、 wrap-reverse,默认为 nowrap。

nowrap

默认,图略。

wrap

wrap-reverse

flex 使用不再深入探讨,推荐阮一峰写的教程 Flex 布局教程:语法篇

定位,慎用

绝对定位,相对定位,根据实际需求选用,切忌滥用。

负的margin

见一个打死一个!!!

table,已废弃,略~

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:更丰富的前端动效by CSS Animation

 在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

2054
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3647
来自专栏小筱月

H5 和 CSS3 新特性

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

6591
来自专栏小古哥的博客园

读书笔记《CSS权威指南》

阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端...

3525
来自专栏非著名程序员

Android 自定义标签 ViewLayout

自定义viewLayout实现标签View,UI的效果图如下: ? 如图,我们要自己实现带描边的,带花括号的,带三角形,带对勾的这样一个layout ,并且对...

21710
来自专栏梦魇小栈

JQuery分析及实现part6之动画模块功能及实现

942
来自专栏武军超python专栏

2018年9月9日用HTML开发网页的总结

今天学到的新单词: relationship n关系 inherit v继承 rel:relationship的英文缩写·REL属性用于定义链接的文件...

1826
来自专栏软件开发

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,...

2398
来自专栏林德熙的博客

win10 uwp 拖动控件 Margin 移动Canvas 拖动控件Manipulation 拖动控件

我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法。其中第一个是最差的,最后的才是我希望大神你去用。

1620
来自专栏进击的君君的前端之路

CSS常见样式(二)

1882

扫码关注云+社区

领取腾讯云代金券