图像溢出问题（CSS）

我试图为自己创建一个个人博客，我遇到了溢出问题。我有一个内部div作为主页，旨在包含文本和图像进行审阅。 “read more”按钮用于在新页面中显示整个段落和图像。图像溢出问题（CSS）

<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底部切割的图像。有没有办法做的就是一个整洁格没有改变的最大高度

enter image description here

任何帮助，将不胜感激。感谢

还有另外一个例子here理解问题

来源

2014-07-26 user3880103

请创建http://jsfiddle.net/一个例子。 – Hbirjand

如果内容是文章

你可以离开height: auto;的短版，容器将适合的内容的高度。

如果内容是文章本身而你只是想隐藏其余的部分，你可以考虑做一个缩短版本或添加一个锚点，然后让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);

来源

2014-07-26 17:19:06

图像溢出问题（CSS）

回答

相关问题