请教一种布局

Question

三列，第一列靠左，第三列靠右，间距一样，列宽一样，如图：

其实最终想实现的就是类似天猫商品列表的布局：

痛点是天猫的父元素宽度是固定的。每个商品只需计算就是。

而我的父元素宽度不确定，求指教

Answer 1

谢邀！
以前回答过，你参考以下。
方案一：flex布局 justify-content: space-between;
方案二： margin-left: calc((100% - 240px)/4);
这个类似问题好像被问了好多遍。
flex 这样的布局怎么做?

针对你的，不用flex方案

<style>
    *{margin: 0; padding: 0}
    .wrapper{
        box-sizing: border-box;
        width: 800px;
        border:1px solid black;
        margin: 0 auto;
    }
    .wrapper:after{/*清除浮动*/
        display: block;
        content: '';
        clear: both;
    }
    .item{
        box-sizing: border-box;
        float: left;
        width: 20%;
        height: 200px;
        border:1px solid red;
        margin-right: calc((100% - 3*20%)/2);
        margin-bottom:30px;
    }
    .item:nth-child(3n){
        margin-right:0
    }
</style>
<div class="wrapper">
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
</div>

Answer 2

flex完全布局搞定