设置高度和滚动

时间:2015-04-10 12:31:09

标签: html css zurb-foundation zurb-foundation-5

我正在使用基础揭示模态。

<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)设置模态的高度,使其永远不会超过图像的高度,然后如果长文本超出高度,是否滚动?

2 个答案:

答案 0 :(得分: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>

这可能对您有所帮助

答案 1 :(得分:0)

我想我已经得到了你需要的东西。请看一下:https://jsfiddle.net/an1gsdm0/

我将整行包装在表格行中。图像和文本是 table-cells 。文本的表格单元格中包含带有文本的内联块 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;
}