文章关键字 ‘两端对齐’

CSS columns轻松实现两端对齐布局效果

2020年05月27日,星期三

CSS columns,就是分栏布局的columns属性,可以在不改变元素display值前提下实现两端对齐布局效果,说不定关键时候还是很有用的,可以来了解下这种CSS布局方法。

阅读全文…

CSS深入理解vertical-align和line-height的基友关系

2015年08月30日,星期日

CSS深入理解vertical-align和line-height的基友关系
本文深入探讨vertical-align和line-height之间的关系,属于中长篇,有很多其他地方看不到的知识点。实例效果就在文章页面上,因此,请使用合适的浏览器查看本文。截图丰富,源代码展示详尽,相信本文的内容会对您的学习有所帮助的。

阅读全文…

小tip:中文英文左右padding一致两端对齐实现

2015年08月7日,星期五

不是什么稀奇的技术,很多很多年前自己就玩耍过。
之所以今天拿出来说一下,是因为今天几个小伙伴遇到类似问题,突然发现,一些自己觉得不怎么样的东西,说不定对别人而言会有很大帮助,于是我就打算放出去,希望可以帮助到有需要的小伙伴。
是个什么东西呢?
先看下图……

阅读全文…

折腾:瀑布流布局(基于多栏列表流体布局实现)

2012年03月23日,星期五

跟风,尤其受pinterest的煽风点火,瀑布流就有不少人关注了。我正好最近比较闲,加上有人曾在我站点提出希望我介绍点瀑布流的东西,所以,今儿个也随下大流。
pinterest以及上面迅雷UED xwei的瀑布流demo(至少在FireFox下还是有致命的显示bug的)都是采用的绝对定位实现的,有相对复杂的位置计算。
我一向不喜欢吃别人嚼过的米饭,于是尝试使用另外的原理实现。我是个流体布局控,对绝对定位啊、浮动啊什么的一向没什么好感,于是,这里要介绍的就是基于多栏列表流体布局实现的瀑布流布局效果。

阅读全文…

display:inline-block/text-align:justify下列表的两端对齐布局

2011年03月13日,星期日


本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…