1

我在响应式设计中有无序列表的图像。当我调整窗口大小时，图像会正确缩放。但问题是包装 UL 元素，它不会根据图像高度调整其高度。在跟随 P 元素之前，这会造成很大的空谈。

http://jsfiddle.net/6qrad/1/

如何在ul不浮动的情况下实现元素的高度以进行相应的调整li。

4

1 回答 1

3

首先，每当您进行响应式设计时，请确保使用以下代码段

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

如果你知道 CSS 盒子模型，上面的操作会完全相反，它会计算元素内部的 , 而不是padding元素。borderoutside

现在来到解决方案，您正在使用column-count我认为在您的情况下不需要的属性，您可以简单地使用float: left;而不是使用overflow: hidden;来清除浮动li

演示

如果font-size: 0;您想去除底部剩余的粉红色部分，请使用。（width: 33.33%准确地说，它也会去掉右手边的粉红色。）

演示 2（有间隙，已使用padding）

另外，在我编辑问题时，您提到您不想float这样做，所以我看不出有任何不这样做的具体原因，但如果您不想浮动，您可以display: inline-block;使用width设置为33%每个，还请确保您使用通过制作元素margin-left: -4px;来处理white-spaceliinline-block

于 2013-09-16T08:20:07.853 回答