javascript - 如何将 "shrink wrap"周围的 div float 为子级

Question

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

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

我试过 display: inline-block 并为 div 提供尺寸，但它占据了 100% 的宽度。

这是我正在运行的示例:

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

以前有没有人完成过这样的事情？如果可能的话，我想完全用 CSS 来完成。

Answer 1

那是因为行内元素没有宽度。你应该让你的 child 成为 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/额外的包装器对于具有居中列表且最后一个元素左对齐是必要的。