在图像周围包装文本和块元素

Question

我知道通过向右或向左浮动图像然后将文本放在它后面来包装文本很容易,但我想要做的是将其他元素包裹在其周围,例如div.

我试图将我的div设置为内联并且这很好用,但是一旦我在div中添加了其他div它仍然看起来很好,但是当在Firebug中查看它时,显示你在代码中悬停的元素的蓝色小线扩展在图像上以及当我试图向容器div添加填充时它不起作用你可以看到这是因为填充在最后添加了.

我最终让它看起来没问题,但是在图像中添加填充,但是看起来似乎并不正确,因为Firebug不喜欢它并且我担心兼容性问题.

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

这是一些示例代码:(这个例子是非包装版本)

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

这是一个显示FireBug与它有关的问题的图像(来自JSFiddle示例),正如我所说它在浏览器上看起来很好,但看到萤火虫条一直延伸到图像上我担心这可能会导致问题.

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