时间戳

首页 > 解决方案 > 在图像列之间添加边距？

html - 在图像列之间添加边距？

问题描述

我希望我的三列图像之间有 5px 的边距，但每次添加边距时，第三列都会低于前两列。我尝试将列的宽度减小到 30%，但它们并不完美地位于中间。我该如何解决这个问题？

html:

<div class="rows">
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
      </div>

CSS：

.rows {
  margin-top: 30px;
}

.column {
  float: left;
  width: 33.33%;
  margin: 5px;
}

.column img {
  width: 100%;
}

标签： htmlcss

解决方案

尝试calc()喜欢

.column {
  float: left;
  width: calc(33.33% - 10px);
  margin: 5px;
}

推荐阅读