Question

是否有一种css方法可以从左侧使用超文本（带有html的文本）包装图像？图像的高度小于html文本的高度（html文本表示有序列表， h1 等等），它低于第一行文字。一切都包含在 div 中。

代码在这里：

css代码：

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: right;
    width: 150px;
}
img{
    width: 100%;
}

HTML代码：

<div id="container">
    <div id="floated">
        <img src="http://tiny.cc/63bb5x" alt="">
    </div>

    <h4>this text should wrap the image the same way</h2>
    <h5>and the image should be positioned a little bit lower</h5>
    <ol>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
    </ol>
</div>

And you can see it as it is now here (jsFiddle).

http://jsfiddle.net/25ac1ujs/1/

再一次，我需要稍微拉下图像（比方说100px）。因此，图像上方的空间应该以与图像下方相同的方式填充文字。

任何想法如何做到这一点？我尝试申请的填充或保证金不起作用，因为文本没有出现在空白区域。

谢谢。

Answer 1

您可以使用伪和清除：

#container {
  width: 400px;
  background: yellow;
}
#container:before {
  content: '';
  float: right;
  /* or left */
  height: 7em;
  /* or what ever you need */
}
#floated {
  float: right;
  width: 150px;
  clear: right;
  /* or left if pseudo floats left */
}
img {
  width: 100%;
}
#container {
  text-align: center;
}
ol {
  text-align: left;
}

<div id="container">
  <div id="floated">
    <img src="http://tiny.cc/63bb5x" alt="">
  </div>

  <h4>this text should wrap the image the same way</h2>
    <h5>and the image should be positioned a little bit lower</h5>
    <ol>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
    </ol>
</div>

Answer 2

试试这个：

<div id="container">
 <h4>this text should wrap the image the same way</h2>
<h5>and the image should be positioned a little bit lower</h5>
    <img id="floated" src="http://tiny.cc/63bb5x" alt="">  
<ol>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
    <li>this text should wrap the image the same way</li>
    <li>and the image should be positioned a little bit lower</li>
</ol>
</div>

Answer 3

您可以将浮动div放在h5标记下方：

<div id="container">    
    <h4>this text should wrap the image the same way</h2>
    <h5>and the image should be positioned a little bit lower</h5>
    <div id="floated">
        <img src="http://tiny.cc/63bb5x" alt="Butterfly">
    </div>
    <ol>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
        <li>this text should wrap the image the same way</li>
        <li>and the image should be positioned a little bit lower</li>
    </ol>
</div>

http://jsfiddle.net/xL8j4xpt/

将图像向下拉，使其被超文本边缘化

3 个答案: