带边框的 div 中的图像和文本答案

【问题标题】：image and text in div with border带边框的 div 中的图像和文本
【发布时间】：2012-12-28 07:24:26
【问题描述】：

代码如下：

   <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>

span 块占用的（垂直）空间比图像少，因此边框和图像重叠，图像部分超出了 div 跨度。这里是jsFiddle

如何给out div加上边框？

【问题讨论】：

标签： html css image text border

【解决方案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>

【讨论】：

【解决方案2】：

在第一个 div 样式中添加overflow:auto。

【讨论】：

【解决方案3】：

如果这个http://jsfiddle.net/vleran/aTDYL/8/ 是你想要做的，那么不要只是在外部div（父div）的结束标记之前添加<div style="clear:both;"></div>。

【讨论】：