如何停止 css 将 <li> 向右推？

Question

这是我的第一个问题，我很难解决这个问题。基本上我已经使用 ul 和 li 创建了一个画廊以使其响应。画廊可以在这里找到：

http://www.radiologycafe.com/radiology-trainees/normal-variants

我遇到的问题是，如果图片下方的文本太长，它会将图片直接推到页面右侧下方。

如何使图像排成一行，同时保持页面响应并避免使用 white-space:nowrap 导致文本与其他文本重叠？！

谁能帮帮我！？

Screenshot of the problem. I have drawn on (using amazing photoshop skills) how I want it to look

Answer 1

发生这种情况是因为您的列表项的高度可变。一个快速的解决方法是在每个高度上设置大约 210 像素，它应该覆盖包装文本增加的高度：

.nvgallery ul li {
  height: 210px;
}

根据需要进行测试和调整。

另一个修复，乍一看显然是必要的，是你的浮动没有正确清除，所以在某些视口中，H3 标签最终看起来像 in-line 和你的图像（它们是浮动到标题左侧）。

如果你在H3上设置规则clear:both，这个问题也解决了：

h3 {
  clear: left;
}

Answer 2

您可能希望编辑代码，使其不包含 { float: left; } 在 li 元素上。相反，尝试将 li 元素设置为内联块 { display: inline-block; }.您需要稍微调整 li 项目的对齐方式，但这应该可以解决您的问题。

JSFiddle 示例代码的答案位于：

Answer 3

解决方案 1（隐藏多余的内容以保持相同的高度）

您可以通过使用下面的 CSS 不允许 <li> 中的 <h5> 换行来避免此行为。我还将此规则应用于描述 (<p>s)，以防您将来可能添加具有更长描述的元素：

.nvgallery li h5, .nvgallery li p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

jsFiddle
（注意：我没有添加您网站上的所有 CSS，只添加了与此问题相关的部分）。
如果要将inline-block个元素显示为网格，条件是所有元素高度相等。如果一个元素高于后面的元素，它将创建一个小的浮点（一个角），浏览器将在此处开始一个新的（较短的）行。

方案二（允许不等高）

弹性框。

.nvgallery ul.row {
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

jsFiddle
现在你可以拥有不等高的李，他们都会玩得很好。