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）的标签之前添加<div style="clear:both;"></div>。

Answer 3

将overflow:auto添加到第一个div样式。

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

3 个答案: