响应行的照片缩略图

时间:2016-03-30 14:43:34

标签: html css image responsive-design

我正在将基于表格的布局转换为CSS。少量页面包含一个带有123x123缩略图和标题的“照片库”。展望未来,我会使用不同的布局,但在过去几年中,由于系统限制,我需要坚持使用。它也必须是一个只有CSS的解决方案。

我创建了带有div的行,并使用“clear:left;”,它响应地将介质查询从4行,3行,2行,到移动断点处的单项

但是,在2行中,如果较短的标题旁边有一个非常长的标题,则它不会正确地移动div。可以在codepen页面上的“Opening Session”和“Session for All Attendees”下看到两个示例,然后转到移动视图:

code at codepen

任何提示?我觉得我错过了一些明显的东西,但我已经尝试了所有我能想到的东西。

谢谢!

HTML:

  <div class="row fix-row">
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="fourcolumns">
            <a href="#WM16SATSESSION01.JPG"><img src="http://joopleberry.org/123x123.png" border="0" height="123" width="123" /></a><br />
        <a href="#">High Resolution</a><br />
        <p> Feb. 20<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin at tortor vel dignissim. Aliquam egestas nunc erat, eu ultricies nisl hendrerit ac. Pellentesque placerat pellentesque hendrerit.</p>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="fourcolumns">
        <a href="#WM16SATSESSION02.JPG"><img src="http://joopleberry.org/123x123.png" border="0" height="123" width="123" /></a><br />
        <a href="#">High Resolution</a><br />
        <p> Feb. 20<br /> Pellentesque non dapibus est. Cras facilisis ornare sem, vitae aliquet ante luctus a. Mauris eu tristique lorem. Duis laoreet magna non magna cursus porttitor. </p>
      </div>
    </div>
  </div>

CSS:

.fourcolumns {
  margin-bottom: 30px;
}
.mediaTitle {
  background-color: rgb(234, 234, 234);
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: left;
  }
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: none;
  }
  .fix-row > div:nth-child(4) {
    clear: left;
  }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(3) {
    clear: none;
  }
  .fix-row > div:nth-child(4) {
    clear: none;
  }
  .fix-row > div:nth-child(5) {
    clear: left;
  }
}

1 个答案:

答案 0 :(得分:1)

@media only screen and (min-width: 768px) {
  .fix-row > div:nth-child(2) {
    clear: none;
  }
  .fix-row > div:nth-child(2n+1) {
    clear: left;
  }
}

这将从第二个孩子的第二个孩子开始清除,并且应该给出所需的结果。