如何"shrink wrap"一个div绕着它飘儿

Question

我正在开发一个购物车网站并尝试使搜索结果具有响应性。任何低于桌面分辨率的东西我都希望结果尽可能多（在大多数情况下是 3 个）并且我希望它们居中，一直到 phone.

我遇到的问题是，我似乎无法让父级 div 与其子级宽度相同，也无法将其居中。

我已经尝试 display: inline-block 并给出了 div 的尺寸，但它占用了 100% 的宽度。

这是我正在运行的示例：

http://jsfiddle.net/0jnjum30/1/

有没有人做过这样的事情？如果可能的话，我想在 CSS.

中完全做到这一点

Answer 1

那是因为行内元素没有宽度。你应该让你的 children inline-blocks 而不是 parent。一旦你的 parent 有了宽度，你就可以将它居中。

.parent {
    margin: 0 auto;
    text-align: center;
    width: 300px;
    display: block;    
}

.child {
   display: inline-block;
   width: 100px;
}

如果更新了您的 fiddle：http://jsfiddle.net/gez46x0b/1/ 额外的包装器对于具有居中列表且最后一个元素左对齐是必要的。

如何"shrink wrap"一个div绕着它飘儿

How to "shrink wrap" a div around it's floated children

html

javascript

css

e-commerce