-1

私は基礎を明らかにするモーダルを使用しています。

<div class="row">
    <div class="small-8 columns image-container">
        <img src="/img/myimage.jpg">
    </div>
    <div class="small-8 columns text-container">
        <!-- Long Text Goes Here -->
    </div>
</div>

モーダルの高さを設定して画像の高さを超えないようにする方法 (CSS を使用) はありますか?長いテキストが高さを超える場合はスクロールしますか?

4

2 に答える 2

0

必要なものは揃っていると思います。こちらをご覧ください: https://jsfiddle.net/an1gsdm0/

行全体をtable-rowでラップしました。その中のテーブルセルである画像とテキスト。テキストの table-cell には、テキストを含むinline-block div があります。.image クラスのサイズを操作してテストできます。次に、テキスト フィールドの高さが調整されます。コードは次のとおりです。

HTML:

<div class="container">
    <div id='first' class='img-div'>
        <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/>
    </div>

    <div class="outer-text">
        <div id='second' class='text-div'>Put a long text here...
        </div>
    </div>
</div>

CSS:

.container{
    display: table-row;
}

.img-div {
    display: table-cell;
    float: left;
}

.outer-text{
    display: table-cell;

    height: 100%;
    width: 190px;
}

.text-div{
    display: inline-block;

    height: 100%;

    overflow-y: auto;
}

カスタムのさまざまな画像サイズをテストするには、画像の高さを変更します。

.image{
    height: 190px;
}
于 2015-04-10T17:40:43.560 に答える
0

高さとCSSのオーバーフロー、画像の高さを簡単に制御できます

.image-container{
  
  height:300px /*You can place how much height you want to set*/
  overflow-y:hidden;
}

.image-container img{
  
  height:auto;
  max-height:300px;
  
}
<div class="row">
    <div class="small-8 columns image-container">
        <img src="/img/myimage.jpg">
    </div>
    <div class="small-8 columns text-container">
        <!-- Long Text Goes Here -->
    </div>
</div>

これはあなたを助けるかもしれません

于 2015-04-10T13:42:45.800 に答える