将段落高度限制为另一个div中图像的高度

Question

我正在为响应式博客网站使用两列布局。左列使用图像，缩放以填充列的宽度，右列包含从博客文章中提取文本。

关于如何将右侧栏中文本段落的高度限制为与左栏中图像的高度相匹配的任何想法，因为浏览器宽度会减少？

我计划使用文本溢出：省略号来处理右手div中的文本溢出。

以下图片之前和之后的示例。

这是HTML和我用来设置图像大小的CSS，因为浏览器窗口的大小减小了。

<div class="row blogpost">
    <div class="sevencol">
        <img src="img/greybox.png">
    </div>
    <div class="fourcol last>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
        </p>
        <a class="readMore" href="#">Read More...</a>
    </div>


.blogpost .sevencol img {
        zoom: 2;
        margin: auto;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 100%;
        margin-top: 8px;
    }

Answer 1

您通常会使用JavaScript执行此操作。

在页面渲染后评估图像容器的高度，然后将相同的高度应用于标题容器。

您可能还必须将段落中的“read more”链接内容与应用溢出效果的段落分开。

假设您正在使用jQuery，它可能看起来像这样：

$(document).ready(function(){
   var imgHeight = $('#imageContainer').height();
   $('#caption').css('height', imgHeight);
});

Answer 2

试试这个

http://jsfiddle.net/ZGyhr/

var h = $('img').height();
$('.fourcol').css('height',h+'px');

并为右侧div设置overfloe-y:scroll;

Answer 3

如果您真的想使用css来限制博客文字的大小，那么您可以通过修改显示大小来实现这一点，例如 -

.blogpost .last p{max-height: 300px;/*this is the height how much text you want to show up*/line-height:20px;/*set it this way that there will no cut off text*/ overflow:hidden;}

但你不应该这样使用。您需要从博客脚本中尝试此操作来限制文本。