圖像溢出問題（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）

回答

相關問題