饱满的卡片列表布局

经常遇到这样一种布局(示例代码),数量不定的卡片,左对齐,并且充满容器(卡片与容器四边无间距),效果如下图所示:

饱满的卡片列表布局
饱满的卡片列表布局

这种布局的难点在于,如何让卡片与四边无间距,而解决方案是负 margin。首先放出文档结构以及样式:

卡片的尺寸是 285*200,间距是 20px,所以为每个卡片的设定了 20px 左边距与 20px 的下边距margin:0 0 20px 20px;
为了消除 li 带来的左边距与下边距。一共在两个元素上使用了三个属性:

消除 li 左边很简单,为 ul 指定margin-left:-20px;即可。

但是为了消除 li 的下边距,不仅要为 ul 指定margin-bottom:-20px;,同时还需要为容量 .container 指定两个属性margin-bottom: -20px;overflow: hidden;

发表评论

电子邮件地址不会被公开。 必填项已用*标注