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

【问题标题】：Limit paragraph height to height of image in another div将段落高度限制为另一个 div 中图像的高度
【发布时间】：2012-06-05 19:06:49
【问题描述】：

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

有什么想法可以限制右侧列中文本段落的高度以匹配左侧列中图像的高度，因为浏览器宽度减小？

我打算使用 text-overflow: ellipsis 来处理右侧 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;
    }

【问题讨论】：

仍然坚持这个 - 任何人都可以帮忙吗？以下解决方案似乎都不起作用？

标签： javascript jquery responsive-design css

【解决方案1】：

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

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

您可能还必须将“阅读更多”链接内容与您要应用溢出效果的段落分开。

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

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

【讨论】：

谢谢，你能再解释一下吗？我是 jQuery 新手。

【解决方案2】：

试试这个

http://jsfiddle.net/ZGyhr/

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

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

【讨论】：

谢谢，看看这个，但它似乎没有设置右手 div 的高度来匹配图像的高度？你能进一步解释一下吗？
抱歉，我刚刚玩过这个并在 div 上粘贴了一个彩色背景，我可以看到它正在被更改以匹配图像的高度 -谢谢。现在我只需要让text-overflow:ellipsis; 工作 - 知道为什么它不在这里吗？ jsfiddle.net/ZGyhr
哪里需要text-overflow:ellipsis;
小提琴似乎没有保留我所做的更改-希望这会起作用jsfiddle.net/rNkN5-您可以看到我在哪里添加了text-overflow:ellipsis;
文本溢出属性仅支持水平方向，参考见developer.mozilla.org/en/CSS/text-overflow

【解决方案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;}

但你不应该使用这种方式。你需要从你的博客脚本中尝试这个来限制文本。

【讨论】：