css使多个相互之间有间隔的元素居中显示

来源：互联网发布：js自动 a 标签事件编辑：程序博客网时间：2024/06/05 08:25

场景重现

这里写图片描述
电商网站经常会展示产品图片，假设每行展示4个，且每个和每个之间有20px的距离，总宽度为500px，如何使每行展示的产品看起来是居中显示

效果列举

失败效果
成功效果

代码示例

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>demo</title>  <style>    * {        margin: 0;        padding: 0;    }    body, html {        width: 100%;        height: 100%;    }    .ctn {        width: 500px;        height: 300px;        background: grey;    }    .hidden {        overflow: hidden;    }    .item-ctn {        margin-right: -20px;        margin-bottom: -20px;        background: blue;    }    .item-ctn:after {        content: '';        display: block;        clear: both;    }    .item {        float: left;        width: 25%;        height: 100px;        margin-bottom: 20px;    }    .item-ctx {        margin-right: 20px;        height: 100%;        background: red;    }  </style></head><body>    <div class="ctn">        <div class="hidden">            <div class="item-ctn">                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>                <div class="item">                    <div class="item-ctx">                        <p>1</p>                    </div>                </div>            </div>        </div>    </div></body></html>

阅读全文

1 0