固定宽度的填充元素

时间：2020-06-02 13:42:00

标签： html css

我正在创建一个适应性强的图像行，当图像尺寸太大时，如果需要的话，可以分解为另一行。目前，台式机上连续4个，移动设备上连续2个。

所有图像的宽度均设置为25％或50％。我想让它们稍微均匀地隔开。

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
<div class="images-row">

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="100%">
  </div>

</div>

这很好，并且所有图像都在触摸。我觉得有些空间在视觉上看起来会更好。填充主容器宽度的最佳方法是吗？我试图像这样缩小图像； 

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
<div class="images-row">

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/500x500" width="95%">
  </div>

</div>

在桌面上看起来不错，但是图像的底部仍然触摸下方图像的顶部。做这样的事情：

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 500px) {
.image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.image-padding {
  padding: 5px
}

.image {
  width: 100%
}
<div class="images-row">

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

</div>

也可以很好地进行填充，但是遇到了这样的问题，即它们无法在移动设备上堆叠。我觉得我已经接近了，但不确定如何使它正常工作。

EDIT 

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  justify-content: space-evenly;
}

.image-container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media only screen and (max-device-width: 500px) {
  .image-container {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.image-padding {
  padding: 5px
}

.image {
  width: 100%
}
<div class="images-row">

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

  <div class="image-container">
    <div class="image-padding">
      <img class="image" src="https://via.placeholder.com/500x500">
    </div>
  </div>

</div>

<style>

</style>

2 个答案:

答案 0 :(得分：1)

这是使用现成的网格系统的完美案例，有很多可以使用的网格系统。话虽这么说，您已经很接近了，但是您的html对于您要完成的工作来说有点太复杂了。我的猜测是，您正在与box-model的工作方式作斗争：如果添加padding，则容器会变宽。为避免这种情况，我通常使用“ box-siting：border-box”，这样，填充就进入了容器内部。它只是使一切变得更加逻辑。在我所有的项目中，我都始于：

* {box-sizing: border-box;}

对于您的特定情况，这是我的解决方案，您可以看到我稍微简化了html并更改了CSS：

.images-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.image-container {
  width: 25%;
  padding: 5px;
  box-sizing: border-box;
}


@media only screen and (max-width: 500px) {
  .image-container {
    width: 50%;
    
  }
}

.image {
  width: 100%;
  display: block;
}
<div class="images-row">

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

  <div class="image-container">
      <img class="image" src="https://via.placeholder.com/500x500">
  </div>

</div>

答案 1 :(得分：0)

您的代码可以真正简化，您不需要所有这些容器。通过简化，发现问题也将更加清晰。

.images-row {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

img {
    width: calc(25% - 10px);
}

@media only screen and (max-device-width: 500px) {
    img {
        width: calc(50% - 10px);
    }
}
<div class="images-row">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
      <img class="image" src="https://via.placeholder.com/500x500">
</div>

对于移动设备，问题可能来自@media only screen and (max-device-width: 500px)：例如，还有一些更适合检测移动设备的设备。{p>

相关问题
最新问题