围绕图像环绕文本和块元素

Question

我知道很容易通过将图像左右浮动然后将文本放在其后面，但是我想要做的事情是围绕它包围其他元素，比如div's。

我试图把我的div内联&这个工作得很好，但是一旦我添加了其他的div内仍然div的它看着罚款，但它在Firebug看小蓝线，显示你的元素时在图像上延伸的代码中悬停时&当我试图将填充添加到容器div它不起作用&你可以看到，这是因为填充是在最后添加的。

我最终得到它看起来不错，但添加填充图像，但它似乎仍然不正确的方式去看它作为萤火虫不喜欢它&我很担心兼容性问题。

这是我想要做的事情的图像..灰色区域是我想要文本/元素包裹的地方&棕色是图像。

下面是一些示例代码：（本例子是不缠绕的版本）

<div class="main"> 
    <img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" /> 
    <div class="details"> 
     <div class="about"> 
      <div class="title"> 
       About: 
      </div> 
      <div class="info"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.         
      </div> 
      <!-- Info Ends --> 
     </div> 
     <!-- About Ends --> 
    </div> 
    <!-- Details Ends --> 
    <div class="contentClear"></div> 
</div> 
<!-- Main Ends --> 

实施例的CSS：

#content .wrapper .left .main { 
    padding-top: 20px; 
    width: 550px; 
} 

#content .wrapper .left .main .screenshot { 
    float: right; 
    border: 1px solid #c0c0c0; 
    width: 275px; 
} 

#content .wrapper .left .main .details { 
    width: 263px; 
    padding-right: 10px; 
} 

#content .wrapper .left .main .details .title { 
    color: #0F5688; 
    font-size: 1.8em; 
    font-family: arial; 
    font-weight: bold; 
} 

#content .wrapper .left .main .details .info { 
    margin-top: 6px; 
    font-size: 1.3em; 
    font-family: Arial; 
    color: #636363; 
    line-height: 1.6; 
} 

这里是一个图像示出了问题萤火具有与它（从JSFiddle示例），因为我说它看起来罚款在浏览器，但看到作为萤火虫酒吧延长LL在我担心图像的方式，可能会导致问题..

Answer 1

是的，正确的方法为移动的东西一边，有东西回绕它是浮动的元素。

在下面的示例中（通过代码简化），向浮动图像添加填充效果很好。

CSS：

.main .screenshot { 
    float: right; 
    border: 1px solid #c0c0c0; 
    padding: 5px; 
} 

.main .title{ 
font-size: 140%; 
} 

HTML：

<div class="main"> 
    <img src="img/png" width="150" height="117" class="screenshot" alt="Example" /> 
    <div class="details"> 
    <div class="about"> 
     <div class="title">About:</div> 
     <div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
    </div> 
    </div> 
</div> 

演示jsFiddle