如何添加具有百分比寬度的滾動？

Question

我需要添加滾動到div。問題是女巫的div是文本需要百分比。所以如果有一個長名字，我需要在父項中滾動它。

HTML：

<div id="list"> 
    <div class="info"> 
     <div class="image"> 
      <img src="https://dl.dropbox.com/u/14396564/no_camera.jpg">  </div> 
     <div class="text_data">Intell. off. ch. 1 with a very very very long</div> 
    </div> 

    <div class="info"> 
     <div class="image"> 
      <img src="https://dl.dropbox.com/u/14396564/no_camera.jpg"> 
     </div> 
     <div class="text_data">Intell. off.</div> 
    </div> 
</div> 

CSS：

#list{ 
    max-height:200px; 
    overflow-y:auto; 
    padding:5px; 
    /*display: none;*/ 
} 

.info{ 
    border: 1px dashed #CCCCCC; 
    margin-bottom: 5px; 
    padding:5px; 
    overflow: hidden; 
    cursor: pointer; 
} 

.info .image{ 
    width:20%; 
    display:inline-block; 
    margin-right:20px; 
    /*border: 1px solid red;*/ 
} 

.info .image img{ 
    width: 100%; 
} 

.info .text_data{ 
    display: inline-block; 
    /*border: 1px solid green;*/ 
    vertical-align: top; 
    overflow-x: auto !important; 
} 

jsfiddle.net

Answer 1

如果您希望文本始終顯示在圖像的右側，而沒有換行，則需要將div的white-space屬性設置爲nowrap。

New jsFiddle

所以這是class="info"新的CSS（其餘不變）。

.info{ 
    border: 1px dashed #CCCCCC; 
    margin-bottom: 5px; 
    padding:5px; 
    overflow: auto; 
    cursor: pointer; 
    white-space: nowrap; 
} 

Answer 2

這裏：http://jsfiddle.net/2DLqq/3/

編輯（圖像的一側，垂直滾動）：http://jsfiddle.net/2DLqq/6/

編輯（圖像的一側，水平滾動）：http://jsfiddle.net/2DLqq/7/

您需要添加container div圍繞.text_data並將容器設置爲overflow-x：auto;和白色空間：nowrap;所以這是一行文本，而不是包裝到第二行。

<div class="text_data_container"> 
    <div class="text_data"> 
      Your really, really, really, really, really, really long string of text. 
    </div> 
</div> 

CSS：

.text_data_container { 
    overflow-x:auto; 
    width:100%; 
} 

.text_data { 
    display:inline-block; 
    white-space:nowrap; 
} 

而且你的 「垂直對齊：首位;」在原始.text_data中沒有效果，因爲它只適用於圖像。