ul内部的响应式设计图像,不会调整大小

时间:2013-09-16 08:14:30

标签: html css css3 responsive-design html-lists

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

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

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

1 个答案:

答案 0 :(得分:3)

首先,无论何时进行响应式设计,请务必使用以下代码段

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

如果您了解CSS框模型,则上述内容与此完全相反,它将计算元素内paddingborder而不是元素outside

现在找到解决方案,您使用的是我认为在您的情况下不需要的column-count属性,您只需使用float: left;而不是使用overflow: hidden;来清除浮动{ {1}}

Demo

如果你想摆脱底部剩余的粉红色部分,请使用font-size: 0;。 (准确地使用li,这也将消除右侧的粉红色。)

Demo 2(有差距,使用width: 33.33%

另外,在我编辑问题时,你已经提到你不想padding,所以我没有看到任何具体的理由不这样做,但如果你不想要若要浮动,您可以float使用display: inline-block;设置为width,同时确保使用33%来处理margin-left: -4px; {1}}元素white-space