说说图文列表的布局
没错，就是这样简单的布局。
分了4列，你会想到什么呢？百分比？还是PX
我自己还是喜欢用百分比，不知你们是如何使用。
接下来说说我的做法！！
顶部的排序，就弄个色块吧。
这里是列表
CSS:
.container {
width: 1200px;
margin: auto;
}
.sort-warp {
height: 40px;
margin: 40px 0;
background: #f3f3f3;
}
说到这里，图文列表的布局你会想到什么标签呢？
在html5中有专用的标签哦！是规范哦！就是figure，figcaption
基本布局：
积分：50
立即购买
这就是大概的布局了，先把结构写出来，然后再写css。
这里写显示了一个figure，可以多复制几个出来哦！！这里就不复制了。
figure就是列，相当于html4.0里面的li
class="warp"：用于内边距缩进，这个到最后再说，很强大的作用。
class="pic-warp"：专门放置图片 。
class="con-warp"：专门放置内容。
其他就不说了，一看就基本上是懂的。
下面是CSS：
上图看到的列表有4列，那么figure就是25%啦！并且是并排的，那就是float: left; 别忘了，使用了浮动，父级必须清浮动哦！
.list-warp figure {
float: left;
width: 25%;
}
然后把图片也写进去，并且把图片宽度设置为100%
刷新浏览器看看，整体效果如下：
大致的效果是不是出来了。
好咧，先处理一下标题。CSS如下：
.list-warp figcaption {
font-size: 14px;
color: #636363;
line-height: 22px;
}
然后再处理“积分”。CSS如下：
.list-warp p {
padding: 8px 0;
font-size: 14px;
}
.list-warp p strong {
color: #f18517;
font-size: 18px;
}
然后再处理 “立即购买” 按钮。CSS如下：
.list-warp .more {
display: block;
width: 104px;
height: 32px;
margin-top: 8px;
border: 1px solid #f18517;
background: #fdeede;
font-size: 14px;
color: #f18517;
text-align: center;
line-height: 32px;
}
搞定了，再刷新浏览器看看
是不是又一步接近了。发现标题和图片贴得太近了。这里很简单可以用margin也可以用padding。
还记得 class="con-warp" 。这个是专门处理内容区的。处理一下就好。CSS如下：
.list-warp .con-warp { padding-top: 15px; }但有人可能会问，为什么不在 figcaption 里直接写样式呢？什么又要搞个 con-warp 出来？
用这个东西肯定是有一定道理的。现在只是 top 需要间距。那如果 上、右、左都需要呢。那怎么办，总不能在 figcaption、p、a里面都写吧。
所以使用 con-warp 这里只要写一个位置，就搞定啦！！
其他的东西都弄好了。现在就来处理列与列之间的间距了。
经常看到有些人在写的时候，直接就使用了margin-right，使用列的右边产生间距。但这样会导致最后一个无法贴边。
CSS如下：
.list-warp .warp { margin-right: 52px; }
就像这样，注意右则
然后又要针对右则那个去处理样式。这样做也没有问题，可以通过css或js的方式来处理。
但是对于程序输出来说，会导致他们做更多的事情，因为他们在输出的时候，需要进行判断是第几个需要加东西。
所以说作为前端工程师来说，要了解程序的输出机制，尽可能减少他们的工作。前端能处理的就处理掉，这样是最好的，程序做起来也舒服一些。
除了这个做好法，我自己也有另一种做法。
也是使用 margin ，但是我们使用左右两边。
预先测量一下，列与列之间的间距宽度。大概是52px;
然后就写成这样啦，CSS如下：
.list-warp .warp {
margin: 0 26px;
}
52的一半是不是26。
然后再看看效果，
中间的间距是不是比较大，左右两个比较小，这就对了。
中间是26与26相加，就是52，自然就比较大。左右两个边得相加，自然就是26px
但与设计稿不一样。设计稿左右两边是没有的。
处理这个也不难。
html里面不是有个ul。
利用这个ul就可以。使用ul左右两边往外拉一下就好，如何往外拉，其实就是设置 margin 负值就可以。如下：
.list-warp ul { margin: 0 -26px; }再看看效果
看，是不是搞定了，还有一个哦，
ul往外啦了，是不是有东西撑出了最大范围区。竟然有这个问题就需要处理，在父级隐藏一下就好，CSS如下：
.list-warp { overflow: hidden ;}好吧，全部搞定了。
纯CSS处理，不用JS，也不用添加其他的样式。
其实只是一个小小的技巧而已。
题外话，如果我要分5列呢？
是不是把figure 设置为20%就可以了。
确实是这样，但不能直接就设置。需要能过另一个样式来处理，因为要考虑到有可能另外的地方也用了相同的样式。
注意，在list-warp里面添加了一个 col-5 的东西，然后通过这个来处理，这样就不会对其他地方超成影响啦！
CSS如下：
.list-warp.col-5 figure { width: 20%; }效果如下：
是不是超方便，如果要6列、7列。用同样的方式处理就好。
获取《vue3.0大公司后台管理系统开发 正规开发流程项目实践》视频，
请点击下面 “了解更多” 或 请关注微信公众号《手把手撸码前端》
4819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
