2

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

4

2 に答える 2

2

white-space折り返しなしでテキストを常に画像の右側に表示する場合は、div のプロパティをに設定する必要があります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; に設定する必要があります。and white-space:nowrap; そのため、2 行目に折り返されるのではなく、1 行のテキストになります。

<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 は画像にのみ適用されるため、効果はありません。

于 2013-01-23T08:11:45.137 に答える