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最小寬度問題

回答

相關問題