现代 CSS

Minoz的博客

实现两列等宽布局的几种方法

当你想实现两列等宽,左边一些内容,右边一些内容时,基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半,并且可以明显的区分他们。在CSS中有很多方法都可以实现,那么来看看如何用多种方法实现这种两列等宽布局。

更好利用text-decoration属性

Marie Mosley和他的朋友刚刚在Almanac改动了text-decoration的属性。你可能了解这个属性。例如,很多浏览器在链接处默认text-decoration: underline即添加下划线,当然,你也可以设置 text-decoration: none删除下划线。但你有可能不知道这个属性还可以做很多事情,并且使用各种子属性可以实现更多细致的样式。

探索Flexbox

Flexbox最大的优点是计算空间能力强,尤其是当对一个容器里未知数量的子项目进行布局时。更具体来说,当给导航栏或者网格布局时,它们所需的空间有可能远超过现在计算的数值。想象一下在CMS里面当用户增删导航栏的项目时,既不想更改样式,又要填充其空间。你甚至可以用它同时计算不同类型的单元。对于不熟悉Flexbox的人来说,在CSS里它就是一种计算并分布空间的智能布局模式,同时也解决了一些困扰多年的布局问题以及hack。

返回顶部