2

我需要将滚动添加到 div。问题是witch is text中的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

4

2 回答 2

2

如果您希望文本始终显示在图像的右侧而不换行，则需要将 div 的white-space属性设置为nowrap.

新的 jsFiddle

所以这是新的 CSS class="info"（其余不变）。

.info{
    border: 1px dashed #CCCCCC;
    margin-bottom: 5px;
    padding:5px;
    overflow: auto;
    cursor: pointer;
    white-space: nowrap;
}
于 2013-01-23T08:28:49.127 回答
0

这里：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;
}

还有你的“垂直对齐：顶部；” 在您的原始 .text_data 中无效，因为它仅适用于图像。

于 2013-01-23T08:11:45.137 回答