css 最小宽度问题

Question

.mainCoverWrapper {
    position: relative; 
    min-width:312px; 
    background:red
}

我正在尝试将 div 的 min-width 设置为 312px 的中心，并根据其动态内容进行扩展，同时保持内容不变居中。现在 min-with 根本不起作用，因为它需要一个 float 。我不能使用 float ，因为我需要页面居中的 div。

换句话说，div 以宽度为 312px 的 margin auto 开始，并在居中时随着添加的内容扩展。这可能吗？

如有任何帮助，我们将不胜感激。

Answer 1

http://jsfiddle.net/FVmvA/

下面是父级跟随子级宽度的工作示例，子级将根据其中给定的文本展开。

.myCoverWrapper {
    border: 1px solid Peru;
    margin:auto;
    min-width: 200px;
    max-width: 100%;
    display: inline-block;
    background: red;
}

.test {
    height: 100px;
    margin: 10px;
    background: cyan;
}

这使得父 div 跟随 child 的宽度。

然而，这将不允许您将其“居中”。你不可能两者兼得。这是因为您无法在不知道元素宽度的情况下将图像居中。

解决方案是使用 jQuery，必要时添加 CSS。

Here's一个例子。有一些错误，但您已经了解了总体思路。