1

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

当浏览器宽度减小时，关于如何将右侧列中文本段落的高度限制为与左列中图像高度匹配的任何想法？

我打算使用 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;
    }
4

3 回答 3

0

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

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

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

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

$(document).ready(function(){
   var imgHeight = $('#imageContainer').height();
   $('#caption').css('height', imgHeight);
});
于 2012-06-05T10:41:53.277 回答
0

尝试这个

http://jsfiddle.net/ZGyhr/

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

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

于 2012-06-05T10:54:17.100 回答
0

如果您真的想使用 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;}

但你不应该使用这种方式。您需要从您的博客脚本中尝试此操作以限制文本。

于 2012-06-05T11:06:49.817 回答