如何在HTML和CSS中创建水平列？

代号

我正在尝试在英雄部分的正下方复制此站点的列，即水平列（它具有4张Apple Watch，iPad pro，“一起更好”和Macbook的图像）。我的问题是，我似乎无法使图像的长度和宽度都相等，实际上，图像只是在中心聚集在一起并被截断。我是编码方面的业余爱好者，并且是堆栈溢出的新手，因此，如果我不清楚的地方，请告诉我。

.sub-hero {
width: 610px;
margin: 0 auto;
}
.col-1 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("watch_large.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}
.col-2 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("ipad_pro_large.jpg");
  background-size: cover;
  background-position: center;
}
.col-3 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("accessories_large,jpg");
  background-size: cover;
  background-position: center;
}
.col-4 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("macbook_large.jpg");
  background-size: cover;
  background-position: center;
}

<div class="sub-hero">
    <div class="col-1">
      <img src="images\watch_large.jpg">
    </div>
      <div class="col-2">
        <img src="images\ipad_pro_large.jpg">
      </div>
      <div class="col-3">
        <img src="images\accessories_large.jpg">
      </div>
      <div class="col-4">
        <img src="images\macbook_large.jpg">
      </div>
</div>

83C10

这里有几件事要讲：

如果background-image在CSS中设置属性，则不再需要<img>标记。实际上，这就是您的图像聚集在一起的原因。您可以删除所有<img>标签。
在您的CSS中，.col-3该background-image属性在URL中使用逗号而不是点。
CSS.sub-hero需要进行font-size: 0;设置以消除inline-block元素之间的空白（这是处理此问题的一种方法：与Inline Block Elements之间的空间作斗争）。

.sub-hero {
  width: 610px;
  margin: 0 auto;
  font-size: 0;
}
.col {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.col-1 {
  background-image: url("https://altcademy.github.io/apple_clone/images/watch_large.jpg");
}
.col-2 {
  background-image: url("https://altcademy.github.io/apple_clone/images/ipad_pro_large.jpg");
}
.col-3 {
  background-image: url("https://altcademy.github.io/apple_clone/images/accessories_large.jpg");
}
.col-4 {
  background-image: url("https://altcademy.github.io/apple_clone/images/macbook_large.jpg");
}

<div class="sub-hero">
  <div class="col col-1"></div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
  <div class="col col-4"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。