我正在使用基础揭示模态。
<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)设置模态的高度,使其永远不会超过图像的高度,然后如果长文本超出高度,是否滚动?
答案 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;
}