创建响应性产品网格。我的宽度怎么了？
我创建了一个带有width:90%的容器(以及10%的填充)，其中有三个带有width:30%的display:inline div
这并没有达到预期的效果，我想让三个div伸展到容器的30%，从而填充整个容器。
首先，创造一些有反应的东西。我打算将我的图像放在这些最大宽度的div中，以创建一个响应性的产品网格。
JS Fiddle
正如您所看到的，产品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>回答 3
Stack Overflow用户
发布于 2012-10-15 18:53:09
下面是你要找的东西：
http://jsfiddle.net/abrdn/6/
基本上，您需要浮动它们，以使它们满足填充以适应div的要求。
但是，因为您的最终目标是响应性设计，所以您需要给产品div一个固定的宽度，否则，当显示变得太小时，它们不会从同一行变成垂直叠加。像这样..。
http://jsfiddle.net/abrdn/10/
注意div是如何转到另一行的，而不是在使用百分比宽度时简单地挤在一起变小。
您可以将其扩展到更远的地方，使用百分比min-width进行固定的width，以使其能够填充，但是一旦达到最小宽度，则可以转到新的行，如下所示：
http://jsfiddle.net/abrdn/12/
Stack Overflow用户
发布于 2012-10-15 18:48:56
你只是忘了浮动.product
.product{
float:left;
width:30%;
display:inline;
}如果浮动一个元素，则display属性是无用的，但是display:inline 修复IE7问题。
一些资源：
- http://css-tricks.com/all-about-floats/
- http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Stack Overflow用户
发布于 2012-10-15 19:23:39
display:inline-block; + float:left;，因为内联块在盒子模型中添加了奇怪的margin/padding。但是，.product的宽度不应该是33.33333%，因为您正在将#content的宽度除以3?然后使用width:100%; height:auto; display:block;对图像进行填充和拉伸。
https://stackoverflow.com/questions/12902030
复制相似问题
腾讯云开发者
