DIV內部的圖像超出其邊界

enter image description here DIV內部的圖像超出其邊界

我不知道爲什麼會發生這種情況。我能解決這個問題的唯一方法是在文本之後加入一些中斷，但顯然這不是一個可接受的解決方案。

隔離CSS：

.center_column { 
    max-width: 892px; 
    float: left; 
} 

.content { 
    width: 892px; 
    background-color: #FFF; 
    background-image: url("style/contentpost.png"); 
    background-repeat: no-repeat; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #7699bb; 
    border-radius: 10px; 
} 

.content_wrap { 
    margin-top: 40px; 
    margin-left: 20px; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    text-align: left; 
} 

.text { 
    width: 100%; 
    margin-top: 20px; 
    text-align: justify; 
    text-justify: distribute; 
    font-weight: normal; 
    font-size: 16px; 
}

隔離HTML：

<div class="center_column"> 
    <div class="content"> 
     <div class="content_wrap"> 
      <div class="text"> 
       <img src="image">Text 
      </div> 
     </div> 
    </div> 
</div>

爲什麼會出現這種情況？有誰能告訴我如何解決這個問題嗎？預先感謝您:)

來源

2012-11-15 Adiost

這將迫使瀏覽器來計算含浮動div的高度：

.text{ 
    overflow: hidden; 
}

此外，谷歌clearfix，如果你不想overflow:hidden出於某種原因做。

來源

2012-11-15 10:13:43

這是因爲你的

float : left;

您需要將您的圖像下面添加此

<div class="clear"></div>

。

並添加到您的css文件

.clear { clear : both; }

來源

2012-11-15 10:14:33 Asdine

您可以使用一個固定的圖像的寬度和高度CSS，或使用CSS背景位置和大小屬性。

來源

2012-11-15 10:15:24

添加<div>，用於清除浮動：

<div class="center_column"> 
    <div class="content"> 
     <div class="content_wrap"> 
      <div class="text"> 
       <img src="image">Text 
       <div style="clear: both;"></div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2012-11-15 10:17:19

浮動：左;是你的問題，

地址：

<div class="clear"></div>

CSS：

.clear { 
    clear: both; 
}

來源

2012-11-15 10:21:07

看你是不是與你的整個佈局完成呢。試試這個佈局和樣式..

<div class="center_column"> 
    <div class="content"> 
     <div class="content_wrap"> 
      <img class="pic" /> 
      <div class="text">TEXT</div> 
     </div > 
    </div> 
    <div class="footer" >FOOTER</div> 
</div>

添加到您的現有樣式

.pic { 
    float:left; 
} 

.footer { 
    clear: both; 
}

浮動後它實際上浮的一切，將同時清除，向左或向右，將清理浮動問題。換句話說，結束浮動效果。

來源

2012-11-15 10:26:41

DIV內部的圖像超出其邊界

回答

相關問題