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

Posted 2023-03-06

【中文标题】创建响应式产品网格。我的宽度怎么了？

【英文标题】：Creating a responsive product grid. What's up with my widths?

【发布时间】：2012-10-05 19:19:21

【问题描述】：

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

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

首先去创建一些响应式的东西。我打算将我的图片放在这些具有最大宽度的 div 中，以创建响应式产品网格。

JS Fiddle

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

Live example

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>

【参考方案1】：

这是您要查找的内容：

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

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

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

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

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

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

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

【讨论】：

这绝对是完美的。我实际上并没有计划让这个完全响应和可堆叠，但现在你帮我解决了这个问题，它启发了我！我想我现在必须处理标题和导航。虽然看到创建响应式网格有多么容易，但实际上并没有我想象的那么糟糕！

手工/手动学习很多内容很重要，但是当您开始对定位感到满意时，您应该查看 - media queries（您需要做同样的事情）网站在多种设备上看起来很漂亮），然后进入像 twitter bootstrap 这样的框架，它提供了一种干净/整洁的方式来实现您现在正在谈论的内容。

另外，我意识到您正在寻找第三种/更好的方法。请参阅我的回答中的第三个示例。

我有点困惑……为什么产品的宽度是 100%？应该是 30% 没有？

你说的是第三个例子吗？是100px 不是100%

【参考方案2】：

你只是忘了浮动.product

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

如果你浮动一个元素，display 属性是没用的，但是display:inline fixes an IE7 issue。

一些资源：

http://css-tricks.com/all-about-floats/ http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

【讨论】：

是的，但是显示：内联毁了一切

为什么是@Ibu？没有看到任何...废墟

你能告诉我 display:inline 在哪里破坏了东西，所以我可以进行浏览器测试吗？你在运行什么系统？

【参考方案3】：

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