圖像和文本中的div與邊界

Question

下面是代碼：

<div style="border-style:solid; border-color:aqua; border-width:1px;"> 

     <img src="some picture" align="left" /> 
     <div> 
      <span >SOME TEXT</span></br> 
      <span >SOME TEXT</span></br> 
      <span >SOME TEXT</span> 
     </div> 

    </div> 

跨度塊佔用較少的（垂直）空間然後圖像等的邊界和圖像重疊並且圖像部分超出DIV跨度的。這裏是jsFiddle

如何將邊框應用到出div？

Answer 1

您應該清除圖像和跨度加div：<div style="clear:both"></div>到底。

<div style="border-style:solid; border-color:aqua; border-width:3px;"> 

      <img id="image_HDDimageControl" src="http://stereo-ssc.nascom.nasa.gov/beacon/t0193.jpg" align="left"> 
      <div> 
      <span >SOME TEXT</span ></br> 
      <span >SOME TEXT</span ></br> 
      <span >SOME TEXT</span > 
      </div> 

<div style="clear:both"></div> 

Answer 2

如果這http://jsfiddle.net/vleran/aTDYL/8/是你正在嘗試做的比關閉外格（父DIV）的標籤之前只需要添加<div style="clear:both;"></div>。

Answer 3

將overflow:auto添加到第一個div樣式。