CSS：將寬元素裝入div而不會拉伸它

我試圖將非常寬的div添加到現有的非固定大小的div。這裏有一個小例子（jsfiddle）：CSS：將寬元素裝入div而不會拉伸它

<html> 
    <head/> 
    <body> 
     <div style="float: right; border: 1px solid green;"> 
      Some content 
      <div id="problematic-div" style="border: 1px solid red; overflow: auto;"> 
       This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/> 
       It_should_have_a_horizontal_scrollbar_instead 
      </div> 
      Some content here too 
     </div> 
     Main content goes here 
    </body> 
</html>

什麼情況是，大內div，使外div拉伸以適應。我希望外部div不要調整大小（而是保持內部div不存在的大小），而是讓內部div顯示一個水平滾動條。

這是很容易做到的，如果有可能知道如何大外div應該和限制內div的width到這一點，但在這裏我想作外div的尺寸標準是「 使用任何寬度將適合所有內部元素，除了寬內div「。

爲了做到這一點，我的猜測是，內div需要從外一個的大小忽略計算的寬度只有，不爲高，而這正是我不知道該怎麼辦。我試了幾件事情：

設置外div的position到relative，然後設置內部一個人的absolute。這適用於外層div不再由內層伸展，但水平滾動條沒有出現，其位置與外層div的左上角相距0,0，並且它重疊了一些外div的內容
使內div浮子，以及兩個clear: both元件之間包裹它如下，仍然使外元件伸展：

。的width

<div style="clear: both;"></div> 
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;"> 
    This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/> 
    It_should_have_a_horizontal_scrollbar_instead 
</div> 
<div style="clear: both;"></div> 
Some content here too

一些Mozilla的供應商前綴（min-content，fit-content，available），但他們都不似乎有我想要

總之效果，我想太多的影響就像這個頁面上面列出的HTML代碼一樣，但是這個頁面通過在問題容器上設置一個固定的寬度來實現它。這樣的事情可能嗎？

來源

2012-05-14 Etienne Perot

你知道'溢出：hidden'和'溢出-X：hidden'我把它？如果沒有，請嘗試。 –

@David'overflow：hidden'在這裏不適用，因爲在容器上沒有設置特定的寬度，因此沒有溢出。 – chrisn

啊，當然。這就說得通了。我現在知道了。必須考慮那個...... –

正如我在我的評論中所說的那樣，在沒有實際指定限制的情況下不可能限制寬度。您是否有任何指南來確定頁面上的列的大小，例如百分比或設置主列的寬度？否則，頁面不知道要爲每列分配多少空間，並且頁面的外觀將不可預知。

我收集你不想設置寬度的原因，以便您可以使用屏幕的全部可用寬度。因此，我建議你使用百分比，例如右側欄的30％。這給出了可預測的佈局，並且還允許您在內部內容上實現所需的滾動條，因爲您已指定了外部div的限制。例如

<div style="float: right; width:50%"> 
    Some content 
    <div id="problematic-div" style="overflow-x: scroll; width: 100%;"> 
     This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/> 
     It_should_have_a_horizontal_scrollbar_instead 
    </div> 
    Some content here too 
</div>

您將需要測試跨瀏覽器，但它應該在大多數瀏覽器都工作）

來源

2012-05-14 02:57:30 FluffyKitten

建議 - 目前屏幕寬度存在巨大差異，所以開發適合屏幕寬度並仍然可用且可讀的頁面非常困難 - 在諸如手機等小型設備上，您將不會有2列中有足夠的空間讓內容可讀;在大屏幕上，線條太長，這使得它們難以閱讀 - 讀取的最佳寬度被認爲是60-75字節。 – FluffyKitten

我覺得這樣做沒有設置固定寬度的唯一方法是做到這一點：

http://jsfiddle.net/pgRd5/

設置內部DIV寬度爲0，力溢出可見。然後在外部div集溢出爲auto，滾動條將出現在外部div上。如果你想要內部div上的滾動條，那麼你的運氣不好。

這不是世界上最好的解決方案，所以我建議設置你的側邊欄以獲得最大寬度屬性，如this example。

來源

2012-05-14 02:18:07 xthexder

我沒有獲得滾動條任何與此代碼。但我同意你設置另一列寬度的建議。如果OP正在嘗試做的話，就不可能在沒有實際設置限制的情況下對元素的寬度設置限制！ – FluffyKitten

使用Firefox 12我得到一個滾動條。這段代碼似乎對Google Chrome有不同的影響。 – xthexder

找到了一種方法來建立這個，以便滾動條顯示在正確的位置：http://jsfiddle.net/pgRd5/1/但的確，它似乎只能在Firefox中工作。+1仍然是真的關閉 –

CSS：將寬元素裝入div而不會拉伸它

回答

相關問題