與浮動圖像包裝不能正常工作

下面的代碼：

  <div class="SingleNewsMain" news-type = "{$value.news_type_id}" > 

        <div class="NewsTitleMain"> 
         <a href= "index.php?show_news={$value.id}"><!--{$value.title}-->Some random header</a> 
        </div> 
        <div class="NewsMainImage"> 
         <a href="#"> 
          <img src="img/13095.png"> 
         </a>  
        </div> 

        <div class="NewsMainShort"> 
         <!--{$value.short_text}--> 
         Some random description 
        </div> 

        <div class="NewsInfo"> 
          <span> 
          <icon class="icon-eye-open"></i> 
          </span> 
          <span class="ViewsInfo">2100</span>       

          <span> 
          <icon class="icon-comment"></i> 
          </span> 
          <span class="CommentaryInfo"> 46</span> 
        </div> 
       </div>

這是我的CSS

.SingleNewsMain{ 
    border-bottom: 1px solid rgb(175,175,175); 
} 
.NewsTitle { 
    font-size: 24px; 
    padding-top: 20px; 
    line-height: 27px; 
    font-family: 'Playfair Display SC'; 
} 

.NewsTitleMain { 
    font-size: 24px; 
    padding-top: 20px; 
    line-height: 25px; 
    font-family: 'Playfair Display SC'; 
} 

.NewsMainImage{ 
    padding: 10px 10px 5px 0px; 
    width: 200px; 
    height: 110px; 
    float: left; 
    clear: both; 
} 
.NewsMainShort { 
    font-size: 14px; 
    padding-top: 5px; 
    padding-bottom: 30px; 
    position: relative; 
}

以及兩個截圖中，第一之一。 .NewsMainShort有屬性clear:both

http://imageshack.us/photo/my-images/833/x7cp.png/

而且第二之一，.NewsMainShort沒有財產clear:both

http://imageshack.us/photo/my-images/96/jl29.png/

我想要的文字簡單地包裹在圖像周圍沒有看起來像在第二個屏幕截圖。檢查鉻顯示元素，當沒有clear:both圖像的DIV不符合SingleNewsMain的高度。

來源

2013-10-29 cameraobscura

你真正想要的圖片嗎？ – DaniP

我不明白你的觀點。如果DESCRIPTION_TEXT小於圖像的高度，並且如果文字高於圖像，則通過DESCRIPTION_TEXT的高度，我希望div的高度由圖像的高度決定。我希望它看起來像這裏http://imageshack.us/photo/my-images/28/ecyu.png/ – cameraobscura

請不要使用大寫字母<---->如果您能用小提琴重現您的問題會更好 – DaniP

嘗試在第二截圖kepp CSS一樣，但經過加：

<div class="NewsMainShort"> 
        <!--{$value.short_text}--> 
        Some random description 
       </div> 

<br style="clear:both;">

來源

2013-10-29 22:14:54 BordiArt

謝謝！這有效，但爲什麼我在'.NewsMainShort'上應用'clear：both'時沒有工作。這是有效的HTML？ – cameraobscura

與浮動圖像包裝不能正常工作

回答

相關問題