Question

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

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

Answer 1

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

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

如果您了解CSS框模型，则上述内容与此完全相反，它将计算元素内padding，border而不是元素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

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

1 个答案: