Html 响应式CSS：组织图像问题

我正在尝试布局我的图像，这样当移动设备看到它们时，它们会被分成两列，当较大的设备看到它们时，它们会被分成三列。简单

然而，有一个问题。我的每幅图像都有一个标题，有些标题比其他标题长，因此（在移动视图中）当图像以两列的形式相互下方时，图像可能会留下一个间隙，因为上面图像的标题会干扰图像（或其他内容）

所以它应该是这样的： （其中captn指字幕）

但是，它看起来是这样的：

[image]    [image]
[captn]    [captn]

           [image]
           [captn]
[image]
[captn]

因为第一幅图像的标题稍长

简单的解决办法是缩短第一张图片的标题，但我要保留细节。非常感谢您的帮助：）

我当前的代码：

HTML的一部分：

<ul id="pictures">
      <li>
        <a href="img/blocks.jpg">
          <img src="img/blocks.jpg" alt="" />
          <p>THIS IS A LONG, LONG, LONG, LONG, LONG, LONG MESSAGE.......</p>
        </a>
      </li>
      <li>
        <a href="img/code.jpg">
          <img src="img/code.jpg" alt="" />
          <p>Beautiful code.</p>
        </a>
      </li>
      <li>
        <a href="img/skier.jpg">
          <img src="img/skier.jpg" alt="" />
          <p>Ski jumper.</p>
        </a>
      </li>
      <li>
        <a href="img/android.jpg">
          <img src="img/android.jpg" alt="" />
          <p>Android intelligence is powerful.</p>
        </a>
      </li>
      <li>
        <a href="img/woodland.jpg">
          <img src="img/woodland.jpg" alt="" />
          <p>An adventurous woodland.</p>
        </a>
      </li>
    </ul>

响应CSS的一部分：

@media screen and (min-width: 480px) {

/*TWO COLUMN LAYOUT*/

#primary {
    width: 50%;
    float: left;
}

#secondary {
    width: 40%;
    float: right;
}



/*Picture page*/

#pictures li {
    width: 28.3333%
}

#pictures li:nth-child(4n) {
    clear: left;
}

---

谢谢

我能理解你的问题。由于标题的大小不同，对齐问题可能会发生，正如前面所述

你能做的就是

将图像和标题包装在div中

为div指定一些最小高度（css修复）

或使用此方法（我建议）

equalheight=函数（容器）{
var=0，
currentRowStart=0，
rowDivs=新数组（），
$el，
顶置=0；
$（容器）。每个（函数（）{
$el=$（此项）；
$（$el）.height（'auto'）
topPostion=$el.position（）.top；
if（currentRowStart！=topPostion）{
对于（currentDiv=0；currentDiv
/*图像样式*/
#照片{
保证金：0；
填充：0；
列表样式：无；
}
#图片李{
浮动：左；
宽度：45%；
利润率：2.5%；
背景色：黑色；
颜色：白色；
}
#图片李亚普{
保证金：0；
填充：5%；
字体大小：0.75em；
颜色：白色；
}
@媒体屏幕和屏幕（最小宽度：480px）{
/*两列布局*/
#初级的{
宽度：50%；
浮动：左；
}
#次要的{
宽度：40%；
浮动：对；
}
/*图片页*/
#图片李{
宽度：28.3333%
}
#图片李：第n个孩子（4n）{
清除：左；
}












试试这个：
我想如果你使用三个列，而不是浮动列表项，将整个列表以相等的宽度（33.33%）浮动，那么这个过程可能会对你有所帮助

如果你需要移动视图中的两列，那么只需将ul的宽度更改为50%，那么现在第三列就是问题所在，因为你可以使用100%宽度作为该列的宽度，或者使用一些JavaScript技术，你可以将第三列的项目平均分为其他两列。我不记得了现在，你可以用谷歌搜索这项技术，因为我是在谷歌创立这项技术的

检查以下示例。


/*您不必使用这些JQuery，它仅用于演示目的，它为每个“li”创建不同的颜色*/
$（文档）.ready（函数（）{
var randomColors=[“黑色”、“黄色”、“红色”、“蓝色”、“橙色”、“粉色”、“红色”、“蓝色”、“黑色”]；
$（“.item”）。每个（函数（索引）{
var len=randomColor.length；
var randomNum=Math.floor（Math.random（）*len）；
$（this.css（“backgroundColor”，randomColor[randomNum]）；
//从数组中删除颜色，因此不能再次使用
RandomColor.拼接（randomNum，1）；
});
})；
.col{
浮动：左；
宽度：33.33%；
保证金：0；
填充：0；
}
.项目{
填充物：5px；
颜色：#fff；
列表样式类型：无；
}
.项目跨度{
背景：橙色；
文本对齐：居中；
字体大小：粗体；
显示：块；
宽度：100%；
填充：5px0；
}
.项目img{
宽度：100%；
}
@介质（最大宽度：768px；）{
上校{
宽度：50%；
}
第三栏{
浮动：无；
宽度：100%；
}
}



标题1


标题2


标题3




标题4


标题5


标题6




标题7


标题8


标题9

通常情况下，您会从正在执行的操作中翻转响应屏幕，因此您会针对较大的屏幕进行设计，并以响应方式处理较小的屏幕（最大宽度：480px，而不是最小宽度：480px）。因为您是以这种方式完成的，我认为您出于某种原因必须这样做

将此添加到css的主要部分：

#pictures li:nth-child(odd) {
    clear: left;
}

然后将其添加到响应部分：

#pictures li:nth-child(odd) {
    clear: none;
}

这只是告诉它每秒钟拆分一个。如果没有该指令，代码不太确定如何处理较长的文本。简单但有效。
谢谢大家的回复！我设法找到了一个解决方案：）
#pictures li:nth-child(odd) {
    clear: left;
}

#pictures li:nth-child(odd) {
    clear: none;
}