將父級DIV設置為其子級的寬度

Question

我試圖在不設置固定寬度的情況下使父div子元素的寬度。 但是，沙發手我沒有運氣。

我需要確定大小的元素位於“內容容器”中，該容器沒有定義寬度，因此是頁面的寬度。

我把它放到了一個小提琴（ http://jsfiddle.net/8LfsW/ ）中，“ content-container”設置了一個寬度，以便模擬它在更大屏幕上的顯示。 您會看到“ mag-details”容器比其中的內容大得多。

實時使用的.content-main樣式是：

.content-container{
    font-family:"helvetica neue",helvetica,arial;
    margin:auto;
    margin-top:20px;
}

和mag細節樣式

#mag-details{
    margin:auto;
    background:#FCFCFC;
    border:1px solid #CCCCCC;
    border-radius:8px;
    max-width:1200px;
    box-shadow:1px 1px 2px #CCCCCC;
}

如果有人可以建議我如何以及盡可能將mag-details容器的大小調整為其中內容的大小，將不勝感激。 提前謝謝了！

Answer 1

將父級更改為

display: inline-block;

http://jsfiddle.net/HT46H/

Answer 2

兩種選擇：

1. float:left 。 jsFiddle示例
2. display: inline-block 。 jsfiddle示例

Answer 3

我將刪除浮動元素，並在這些元素上使用inline-block 。

然后在包裝元素上使用white-spane:nowrap ，這樣當屏幕過小時它們不會破裂。

所以加

min-width:100%;
display:inline-block;
white-space:nowrap;

到#mag-details並將li元素更改為display:inline-block

結果在http://jsfiddle.net/gaby/54kjf/