CSS最小宽度问题

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

我试图与中心的312pxmin-width一个div，使之根据其动态内容，同时保持它为中心展开。现在min-with根本不起作用，因为它需要一个浮动。我不能使用浮动，因为我需要在页面上居中的div。CSS最小宽度问题

换句话说，div从margin自动开始，宽度为312px，并以居中的同时添加内容进行扩展。这可能吗？

任何帮助将不胜感激。

来源

2013-03-29 user2222999

无法理解你的问题。所以，div以312px开头。然后当你添加内容到你的div中时，div的宽度会相应地扩大？ –

@何慧，对，对。 – user2222999

如果这就是你要求的，那么用CSS就不可能。你需要javascripts/jquery。 –

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。

Here's一个例子。有一些错误，但是，你有一般想法。

来源

2013-03-29 02:48:07

另外，如果你想中心对齐文本，请将text-algin设置为'test' div。 –

太好了，会试试看。再次感谢您的帮助。 – user2222999

它的工作，但JavaScript是没有必要的。下面的答案也很好。感谢你及时的答复。 – user2222999

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

请参见：CSS center display inline block?

来源

2013-03-29 02:25:02 Matthematics

是的，这可以工作，但Firefox似乎并没有正确渲染内联块。该div不扩大。谢谢。 – user2222999

CSS最小宽度问题

回答

相关问题