Question

我创建了一个容器width:90%（和10％的填充），其中有三个display:inline div，其中width:30%

这没有达到预期效果，我希望三个div伸展到容器的30％，从而填满整个容器。

首先要创建响应式的内容。我打算用最大宽度将我的图像放在这些div中，以创建响应式产品网格。

正如您所看到的那样，当我希望它们扩展以填充内容区域时，产品div只是拉伸到文本的大小。

CSS：

.shoppg #content{
  width:90%;
  margin-top: 60px;
  margin-left:5%;
  margin-right:5%;
}

.product{
width:30%;
display:inline;
}

HTML：

<div id="content">
      <div class="product">
        product 1
      </div>
      <div class="product">
        product 2
      </div>
      <div class="product">
        product 3
      </div>
</div>

Answer 1

你忘了漂浮.product

.product{
    float:left;
    width:30%;
    display:inline;
}

如果浮动某个元素，则display属性无效，但display:inline fixes an IE7 issue。

一些资源：

Answer 2

以下是您要找的内容：

http://jsfiddle.net/abrdn/6/

基本上，你需要漂浮它们以使它们满足你的填充要求以适应div。

但是因为你的最终目标是响应式设计，你需要给你的产品div一个固定的宽度，否则，它们不会从同一行变为垂直堆叠时显示器变得太小。像这样......

http://jsfiddle.net/abrdn/10/

注意div如何转到另一行，而不是简单地挤压在一起并在使用百分比宽度时变小。

您可以稍微扩展一下，使用百分比min-width进行固定width以允许填充，但是一旦达到最小宽度就转到新行，例如这样：

http://jsfiddle.net/abrdn/12/

Answer 3

显示：内联块; + float：left;因为内联块为盒子模型添加了奇怪的边距/填充。但是不应该.product的宽度是33.33333％，因为你将#content的宽度除以3？然后使用宽度：100％;高度：自动;显示：块;对于图像，他们将整天填满和伸展。

创建响应式产品网格。我的宽度怎么样？

3 个答案: