如何添加百分比宽度的滚动？

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/

你需要在.text_data周围添加一个容器div，并将容器设置为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;
}

也是你的“vertical-align：top;”原始.text_data没有任何效果，因为它只适用于图像。