圍繞圖像環繞文本和塊元素

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