css 如何让等分列的间距自适应

Question

我的页面想实现一行放四个书籍封面，每个封面宽度固定，如果缩放浏览器，间距随之缩小。
我现在问题是，不知道怎么让间距能根据浏览器宽度自适应。另外，希望整体最左和最右是没有边距的。
请教一下大家思路。

我的代码：

<div class="four_cover">
       <div class="row">
        <div class="cover">
          <img src="../images/book2.jpg" alt="断代">
          <h3 class="title">断代</h3>
          <p class="author_small">郭强生</p>
        </div>
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book3.jpg" alt="观山海">
          <h3 class="title">观山海</h3>
          <p class="author_small">杉泽 / 梁超</p>
        </div>  
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book4.jpg" alt="鱼翅与花椒">
          <h3 class="title">鱼翅与花椒</h3>
          <p class="author_small">[英] 扶霞·邓洛普</p>
        </div>  
       </div>

       <div class="row">
        <div class="cover">
          <img src="../images/book5.jpg" alt="大雪将至">
          <h3 class="title">大雪将至</h3>
          <p class="author_small">[奥地利]罗伯特•泽塔勒</p>
        </div>  
       </div>
      </div>

css：

.four_cover {
    margin: 0 20px 0 20px;
}


.row {
    width: 100%;
    box-sizing: border-box;
    display: inline;


    .cover {
      float: left;
      width: 200px;
      height: 290px;
      
      box-shadow: 0px 4px 12px 0px rgba(0,0,0,.1);
      margin: 0 114px 0 0;

  


      img { 
          width: 100%;
          height: 100%;
          border-radius: .5rem 0 0 .5rem; 
          

      }
      .title {
          font-size: 1.25rem;
          font-weight: 500;
          margin: 1rem 0 0 0;
          line-height: 1.875rem;

      }
      .author_small {
        font-size: 0.875rem;
        color: $T3;
        line-height: 1.675rem;
        margin: 0;
      }

    }
    
}
}

Answer 1

我这里写了一个比较简单的：
https://codepen.io/Ash-sc/pen...

具体是这么个想法吧：
图片div使用display:inline-block;然后使用百分比宽度。
图片div的父级添加font-size: 0;防止图片div换行。
图片div设置text-align:center;使图片居中。

Answer 2

可以用flex布局,父元素加:
display: flex;
justify-content: space-between;

Answer 3

建议用flex布局，有一个对齐选项是space between，正好满足要求。

也可以用calc函数计算中间的边距：

.cover {
    margin: 0;
}

.cover ~ .cover {
    margin-left: calc(33.333% - 266.667px);
}

Answer 4

个人建议用弹性布局
其他想法用 display:table 也可以试试

Answer 5

可以用flex吗

Answer 6

用calc呢

Answer 7

用table布局
或每列宽度固定百分之25
...