Question

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

我试图将div设置为inline＆amp;这工作正常，但是一旦我在div中添加了其他div，它仍然看起来很好，但是当在Firebug中查看它时，显示你在代码中悬停的元素的蓝色小线延伸到了图像以及＆amp;当我试图向容器div添加填充时它不起作用＆amp;你可以看到那是因为最后添加了填充。

我最终让它看起来没问题，但是在图像上添加了填充，但是看起来似乎并不是正确的方法，因为Firebug并不喜欢它。我担心兼容性问题。

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

example

以下是一些示例代码:(此示例为非包装版本）

<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示例），正如我所说，在浏览器上看起来很好，但看到萤火虫条一直延伸到我担心这可能会导致问题。

jsfiddle example

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

包装文字＆amp;阻止图像周围的元素

1 个答案: