css - css最小宽度问题

Question

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

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

换句话说，div从宽度为的自动边距开始，312px并在居中时随其添加的内容扩展。这可能吗？

任何帮助将不胜感激。

Answer 1

如果您希望宽度是流动的，最好的办法是设置display: inline-block;在要居中的元素和text-align: center;父元素上。

请参阅：CSS 中心显示内联块？

Answer 2

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 跟随孩子的宽度。

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

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

这是一个例子。有一些错误，但是，你有一个大致的想法。