html - 图像溢出问题 (CSS)

Question

我正在尝试为自己创建一个个人博客，但我遇到了使用溢出的问题。我有一个内部 div 作为主页，旨在包含文本和图像以供审阅。 “阅读更多”按钮用于在新页面中显示整个段落和图像。

    <div id="wrapper">
    <!------------------BODY CONTENT OF THE WEB--------------------------------------->
    <div id="bodyWeb">
        <div id="main_content">
        <!--CONTAINER FOR EACH ARTICLE-->
            <?php
            require 'connect_to_sql.php';
            $sql = mysql_query("SELECT * FROM post ORDER BY post_date DESC LIMIT 5 ") or die (mysql_error()); 
            $dataCount = mysql_num_rows($sql);

            if ($dataCount > 0) {
                while ($row = mysql_fetch_array($sql)) {
                    $title = $row['title'];
                    $content = $row['content'];
                    $post_date = date ('M jS, Y', strtotime($row['post_date']));  


                    print '<div class="container">';
                        print '<div class="blog_container">';
                            print '<h1>' .$title.'</h1>';
                            print '<p class="date">'.$post_date.'</p>';
                            print $content;    
                        print '</div>';    //BLOG CONTAINER
                        print '<div class="read_more"><a href="#">read more</a></div>';
                    print '</div>'; //CONTAINER
                }
            }
        ?>      
         </div> <!--MAIN CONTENT-->         
    </div> <!--bodyWeb--></div> <!--WRAPPER -->

这是CSS文件

#wrapper #bodyWeb #main_content .blog_container {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    float:left;
    width:610px;
    max-height:1200px;
    text-align:justify;
    overflow:hidden;
}

因为我无法预测以后创建的每个帖子的高度，而且高度肯定不会相同，所以我只设置了 max-height = 1200px。但我所拥有的只是一张在 div 底部剪切的图像。有没有办法在不改变最大高度的情况下获得一个整洁的 div

如有任何帮助，我们将不胜感激。谢谢

还有一个例子here理解问题

Answer 1

如果内容是文章的短版

您可以保留height: auto;，容器将适合内容的高度。

如果内容是文章本身，只想隐藏剩下的部分，可以考虑做个精简版或者加个 anchor ，然后让js来搞定。

有点像

(inside loop)
var post_head =$(head).offset().top,
    anchor = $(anchor).offset().top,
    height_of_content = post_head - anchor;

$(content).css('height', height_of_content);