时间戳

首页 > 解决方案 > 用于图像布局问题的 CSS

css - 用于图像布局问题的 CSS

问题描述

我正在学习响应式 CSS，所以这对我来说都是全新的。但是，为什么第二行的图像没有拥抱顶部的图像？

理想情况下，我每行只需要 4 张图像，但如果在较小的屏幕或手机等上，它将动态减小图像大小并减少每行的图像数量。似乎无法使其正常工作？任何帮助表示赞赏！与图像相关的所有 CSS 都在该静态页面上。

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 10px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: right;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://memorybox.pt">
      <img src="images/memory-box.png" alt="Algarve Wedding Photography" width="600" height="400">
    </a>
    <div class="desc">Algarve Wedding Planners</div>
  </div>
</div>

<div class="responsive">
<div class="gallery">
  <a target="_blank" href="https://algarvedjhire.com/">
    <img src="images/algarve_dj_hire.jpg" alt="Algarve Wedding Photography" width="600" height="400">
  </a>
  <div class="desc">Algarve DJ & Music</div>
</div>

标签： cssimage

解决方案

在你的 .responsive 类中使用高度而不是浮动右使用浮动左。请参见下面的示例。我使用高度 290px，您可以根据需要使用。

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  height: 290px;
}

您也可以在响应断点中使用 margin-bottom ，使其看起来不错。请参见下面的示例。

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0 30px 0; 
  }
}

推荐阅读