请教一种布局

xiatianlong
  • 2.2k

三列,第一列靠左,第三列靠右,间距一样,列宽一样,如图:

clipboard.png

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

clipboard.png

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

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

回复
阅读 1.7k
2 个回答
月影
  • 2.7k
✓ 已被采纳

谢邀!
以前回答过,你参考以下。
方案一: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>

flex完全布局搞定

1 篇内容引用
宣传栏