將圖像和文字放置在HTML下但邊框在文字下時圖像太大

我試圖在div標籤後面放置邊框，但是線條顯示在文字周圍，而不是在圖像下方在左邊，我如何解決它？將圖像和文字放置在HTML下但邊框在文字下時圖像太大

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      .left { float: left; } 
      .content { 
       clear: both; 
       border-color: #666666; 
       border-bottom: 3px solid; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="content"> 
      <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" /> 
      <p> This is a not so long paragraph</p> 
     </div> 
    </body> 
</html>

enter image description here

我怎樣才能把邊境低一點？

謝謝！

來源

2011-11-24 daisy

什麼是你的CSS？ – Helen

@海倫這是一個最小的情況下，只有部分住在 – daisy

在。內容DIV DIV

款，更換明確：具有溢出兩個：隱藏

.content { 
       overflow: hidden; 
       border-color: #666666; 
       border-bottom: 3px solid; 
      }

來源

2011-11-24 12:29:16

這似乎工作，但你能解釋爲什麼嗎？ –

[這是它工作的原因]（http://www.quirksmode.org/css/clearing.html）。我個人並不認爲值得依賴overflow屬性的副作用，有時需要與其他屬性進行耦合才能實現簡單的清除，只是爲了避免添加額外的元素，但文章的作者肯定似乎... –

@DavidHedlund謝謝！這是一篇有用的文章。 :) –

您需要clear當前float：

或者：

<br clear="left" /> <!-- or "right" or "all" -->

或者：

<div style="clear: left;"></div> <!-- or "right" or "both" -->

來源

2011-11-24 12:25:02

JSFiddle來演示：http://jsfiddle.net/k4Qz9/ –

使用float:left;所有：

圖片已經離開課
Div。內容應該有相同的即;包裝袋中的內容

來源

2011-11-24 12:26:57 Dev

我不明白你想要在這裏實現什麼，但如果你想有一個img和p彼此下面的div，那麼你可以擺脫class="left"在img和申請content類。

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      .left { float: left; } 
      .content { 
       float: left; /* can get rid of this if you want your div to have the page witdh */ 
       border-color: #666666; 
       border-bottom: 3px solid; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="content"> 
      <img src="image.jpg" /> 
      <p> This is a not so long paragraph</p> 
     </div> 
    </body> 
</html>

來源

2011-11-24 12:51:41 nowaq

將圖像和文字放置在HTML下但邊框在文字下時圖像太大

回答

相關問題