一个div 上下两行_手把手教你从0实现一个微信九宫格-CSDN博客

CSS可以说是大多数前端程序员的短板了，很多前端程序员JavaScript用的很溜，但是一旦用起CSS就不那么得心应手了。最近小E在工作中就遇到了一个关于CSS的问题……

案发现场

问题很简单，实现一个微信九宫格的图片布局，如下图。

抽丝剥茧

这个问题乍一看很简单，九宫格的每张图片都是一个正方形，整个九宫格不就是9个正方形每行3个依次往下排吗？

然而事实并非如此，大家知道如今手机种类越来越多，屏幕尺寸大小不一，而微信作为国民级应用，图片九宫格必须适配各种屏幕尺寸。

一旦适配屏幕尺寸，事情就变得复杂了起来，为了简化问题，我们只对九宫格的一行如何实现进行讨论(见下图)，其它两行实现同理。

通过上图我们不难发现，三张图占据了一行宽度，平均每张图占据宽度为整行的三分之一，由此我们很容易想到使用flex布局，其中分别设置3张图片的flex属性为1即可平分整行宽度。

OK，至此我们解决了三等分整行宽度的问题，接下来我们不得不面临另一个新问题，也是本文讨论的重点，即如何实现正方形？前面我们提到，九宫格的每张图片都是一个正方形，当正方形的宽是固定值时，问题很好办，把高设置为同一个固定值就行了。但现在的问题是宽度不固定，我们只知道一行三张图，其中每张图的宽是整行宽度的三分之一，而由于不同手机屏幕宽度不一样所以整行宽度是多少并不是个固定值。

那么怎么办呢？我们不妨这样想：假如我们有种方法，不需要知道宽高具体值，而是可以让宽高保持1:1显示，这样问题不就解决了吗？是的，最终的解决思路就是这样，熟悉CSS的同学应该对padding这个属性并不陌生，这个属性有个特别的地方，其特别之处在于当我们将padding-top或padding-bottom设置为百分数时，padding-top或padding-bottom是相对于父元素宽度(注意不是高度，很多人想当然认为是高度)的百分比，比如设置padding-top:100%，即代表此元素的上内边距是其父元素宽度的100%。这也是本文最想传达给读者的一个知识点，我们借助此属性即可很容易实现宽高比1:1的正方形了，我们只需要将某个div元素的padding-top与width属性分别设置为100%就OK了！

下面是实现的一个九宫格demo。

 1html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7  <title>微信九宫格title>
 8  <style> 9    .row-container {10      display: flex;11    }1213    .item {14      flex: 1; /* 三等分一行宽度 */15      margin: 0 8px 8px 0;16    }1718    .image {19      width: 100%;20      padding-top: 100%; /* 实现宽高比1:1 */21      background: orange;22    }23  style>
24head>
25<body>
26  <div class="row-container">
27    <div class="item">
28      <div class="image">div>
29    div>
30    <div class="item">
31      <div class="image">div>
32    div>
33    <div class="item">
34      <div class="image">div>
35    div>
36  div>
37
38  <div class="row-container">
39    <div class="item">
40      <div class="image">div>
41    div>
42    <div class="item">
43      <div class="image">div>
44    div>
45    <div class="item">
46      <div class="image">div>
47    div>
48  div>
49
50  <div class="row-container">
51    <div class="item">
52      <div class="image">div>
53    div>
54    <div class="item">
55      <div class="image">div>
56    div>
57    <div class="item">
58      <div class="image">div>
59    div>
60  div>
61body>
62html>

效果如下：

如果想展示图片，只需将第21行的background值设置为图片就可以了。

本文重点：

当将padding-top或padding-bottom设置为百分数时，padding-top或padding-bottom是相对于父元素宽度(注意不是高度，很多人想当然认为是高度)的百分比，可据此实现自适应的正方形。