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

Question

我创建了一个带有width:90%（和 10% 的填充）的容器，其中包含三个display:inline带有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>

score 1 · Accepted Answer

你只是忘了漂浮.product

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

如果你浮动一个元素，该display属性是无用的，但display:inline 修复了一个 IE7 问题。

一些资源：

score 1 · Accepted Answer

这是您要查找的内容：

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

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

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

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

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

您可以将其扩展一点，以min-width使用百分比进行固定以width使其填充，但是一旦达到最小宽度，然后转到新行，如下所示：

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

score 1 · Accepted Answer

display:inline-block;+因为 inline-block为盒子模型float:left;添加了奇怪的margin/ 。padding但是.product' 的宽度不应该是33.33333%因为您将#content 的宽度除以 3 吗？然后width:100%; height:auto; display:block;用于图像，它们将整天填充和拉伸。

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

3 回答 3

Related

Reference