css的宽高固定等间距布局demo

逛论坛看到的一个布局问题

今天在看论坛时候看到一个非常有趣的布局问题,而且解法多种多样,挺有意义的。每个解法的背后,都是对css的别样理解。

这个布局是这样的。

布局图;

  • 图标宽高固定,60*60
  • 间距要求都相等
  • 在不同设备也要求同样的效果

方案一

最先联想到弹性盒布局

<code class="language-html">&lt;ul class="list-group"&gt;
    &lt;li class="gap"&gt;&lt;/li&gt;
    &lt;li class="list-item"&gt;&lt;/li&gt;
    &lt;li class="gap"&gt;&lt;/li&gt;
    &lt;li class="list-item"&gt;&lt;/li&gt;
    &lt;li class="gap"&gt;&lt;/li&gt;
    &lt;li class="list-item"&gt;&lt;/li&gt;
    &lt;li class="gap"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
<code class="language-css">.list-group {
    display: flex;
    background: yellow;
}

.gap {
    flex: 1;
}

.list-item {
    width: 60px;
    height: 60px;
    background: #ccc;
}
</code>

方案二

<code class="language-html">&lt;!-- 整体分三部分,外边容器,肯定display:flex,然后第一个share-item和第三个share-item的flex设置1,里边的item-inner设置固定宽高,60*60,然后让其居中 --&gt;
&lt;ul class="share-list"&gt;
    &lt;li class="share-item"&gt;
        &lt;div class="item-inner"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="share-item"&gt;
        &lt;div class="item-inner"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="share-item"&gt;
        &lt;div class="item-inner"&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
<code class="language-css">.share-list {
    display: flex;
    background: yellow;
}

.share-item:nth-child(1),
.share-item:nth-child(3) {
    flex: 1;
}

.share-item:nth-child(2) {
    width: 60px;
}

.item-inner {
    background: #ccc;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}
</code>

方案三

<code class="language-html">&lt;!-- 采用table的方式布局 --&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;th class="gap"&gt;&lt;/th&gt;
        &lt;th class="list-item"&gt;&lt;/th&gt;
        &lt;th class="gap"&gt;&lt;/th&gt;
        &lt;th class="list-item second"&gt;&lt;/th&gt;
        &lt;th class="gap"&gt;&lt;/th&gt;
        &lt;th class="list-item"&gt;&lt;/th&gt;
        &lt;th class="gap"&gt;&lt;/th&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code>
<code class="language-css">table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
tr {
    background: yellow;
}
.list-item {
    width: 60px;
    height: 60px;
    background: #ccc;
}
</code>

方案四

<code class="language-html">&lt;!-- (100%-60*3)/4 =&gt; 25%-45px --&gt;
&lt;!-- 通过计算得出,每个间隙的宽度,25%-45,于是给容器元素一个padding,负责左右两边的25%,内部搭配space-between属性,margin不要忘了 --&gt;
&lt;div class="wrapper"&gt;
    &lt;ul class="list-group"&gt;
        &lt;li class="list-item"&gt;&lt;/li&gt;
        &lt;li class="list-item"&gt;&lt;/li&gt;
        &lt;li class="list-item"&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code>
<code class="language-css">.wrapper {
    padding: 0 25%;
    background: yellow;
}
.list-group {
    display: flex;
    justify-content: space-between;
    margin: 0 -45px;
}
.list-item {
    width: 60px;
    height: 60px;
    background: #ccc;
}
</code>

发表评论

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