我正在将基于表格的布局转换为 CSS。少数页面包含带有 123x123 缩略图和标题的“照片库”。今后我将使用不同的布局,但在过去的几年中,由于系统限制,我需要坚持使用这种布局。它还必须是纯 CSS 解决方案。
我用 div 创建了行,并使用“clear: left;”,它根据媒体查询从 4 行到 3 行,到 2 行,再到移动断点处的单个元素响应地分解.
但是,在第 2 行中,如果较短的标题旁边有一个很长的标题,则它不会正确移动 div。在代码笔页面上可以看到两个示例,在“开幕 session ”和“所有与会者的 session ”下,然后转到移动设备 View :
有什么建议吗?我觉得我错过了一些明显的东西,但我已经尝试了我能想到的一切。
谢谢!
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;
}
}
最佳答案
@media only screen and (min-width: 768px) {
.fix-row > div:nth-child(2) {
clear: none;
}
.fix-row > div:nth-child(2n+1) {
clear: left;
}
}
这将为从第二个开始计数的每个第二个 child 清除左边,并且应该给出期望的结果。
关于html - 照片缩略图的响应行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36312261/