Question

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

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

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

如何让图像保持一致，同时保持页面响应并避免使用白色空间：nowrap导致文本与其他文本重叠？！

任何人都可以帮助我！？

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

Answer 1

这种情况正在发生，因为您的列表项具有可变高度。一个快速修复方法是在每个上面设置一个大约210px的高度，它应该覆盖包装文本中增加的高度：

.nvgallery ul li {
  height: 210px;
}

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

乍一看显然是必要的另一个修复是你的花车没有正确清理，所以在某些视口中，H3标签最终看起来好像与你的图像一致（向左浮动）标题）。

如果您在H3上将规则设置为clear:both，则此问题也会被清除：

h3 {
  clear: left;
}

Answer 2

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

JSFiddle示例代码的答案位于：https://stackoverflow.com/a/11812316/5953701

Answer 3

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

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

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

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

解决方案2（允许不等的高度）

Flexbox的。

.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
现在你可以拥有不同高度的李，他们都会玩得很好。

如何阻止css向右推<li>？

3 个答案:

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

解决方案2（允许不等的高度）