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

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

我试图将我的div设置为inline&这工作得很好,但是一旦我在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,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示例),正如我所说它在浏览器上看起来很好,但看到萤火虫条一直延伸到图像上我担心这可能会导致问题.

解决方法

是的,将东西移到一边并将东西缠绕在一起的正确方法是浮动元素.

在下面的示例中(从代码中简化),向浮动图像添加填充可以正常工作.

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,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,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
  </div>
</div>

演示jsFiddle