兩個元素內聯塊 - 調整大小時無流動

我正在尋找使用內聯塊的多列的最佳方式。除了瀏覽器調整大小以外，一切都很好。第二列將按照人們所期望的內聯塊被推到第一列之下。我明白爲什麼會發生這種情況，我需要知道的是，如果有辦法制作水平滾動而不是推下第二列。我認爲溢出：隱藏會起作用，但似乎並非如此。兩個元素內聯塊 - 調整大小時無流動

我現在沒有設置任何寬度，並希望儘可能保持流暢。

<div> 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div>

col1和col2是內聯塊，沒有設置寬度，當瀏覽器視圖足夠寬時它們並排顯示。當用戶瀏覽器重新縮小尺寸時，col2將顯示在col1下方。我希望他們始終並排，並在需要時進行水平滾動。

2011-11-11 mcot

將white-space: nowrap添加到具有display: inline-block的元素的父項。

2011-11-11 16:30:41 thirtydot

謝謝。這正是我想要的。必須使用它是有意義的，因爲它通常是內聯元素內部的文本。 – mcot

再看看它，這看起來並不會將外部div的寬度推到組合內部cols的大小。任何方式來做到這一點？ – mcot

啊。只是想通了。還要添加overflow-x：滾動到父母做我想要的。 – mcot

<div style="width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div>

，或者嘗試

<div style="min-width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div>

2011-11-11 16:22:38

謝謝，我想盡量保持流暢的內容，但我不知道有什麼辦法。 – mcot

@ user595078如果你想要一些溢出x - 所以你必須告訴瀏覽器「什麼是開始做滾動的邊界」 - 因此，你需要修復寬度 –

耶這就是我的想法。這很吸引人，因爲col2包含一個包含流體內容的表格。 – mcot

你可以嘗試設置min-width到外層div。所以它只適用於窗口較小時，並不修復實際大小。

2011-11-11 16:25:00

回答