Question

如下面的代码所示，我已将dinosaurBody->setRestitution(0)应用于图像，并将float:left应用于文本。但是，图像仍覆盖文本。

我想要的是图像右侧（图像的起始位置）和图像底部（稍后）的文本。基本上，我想在图片周围包装文字。

float:right

#intro_page p{
	line-height: 27px;
	float: right;
}

#intro_main_text{
	float: right;
}

.intro_pic1{
	float: left;
	clear: left;
    position: absolute;
}

Answer 1

在交换图像和段落的顺序时，您可以将图像向左浮动并将CSS缩小为：

--------------------------------------
|     Title          |               |
|     SubTitle       |               |
|                    |               |
--------------------------------------
|     Title          |               |
|     SubTitle       |               |
|                    |               |
--------------------------------------

#intro_page p {
  line-height: 27px;
}
.intro_pic1 {
  float: left;
}

Answer 2

如果将figure元素移到p元素上方，则可以简单地浮动figure元素，文本将自动围绕它。查看this小提琴以查看它的实际效果。

这是修改后的HTML / CSS：

<强> HTML

<div id="intro_page" class="unseen">
    <div id="intro_page_content">
        <figure class="intro_pic1">
            <img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
            <figcaption>Sample Image 2015</figcaption>
        </figure>
        <p id="intro_main_text">Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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.</p>
    </div>
</div>

<强> CSS

#intro_page p {
    line-height: 27px;
}

.intro_pic1 {
    float: left;
}

Answer 3

Floats似乎搞砸了。试试这个，jsfiddle：http://jsfiddle.net/8r20z6t1/

#intro_page p{
    line-height: 27px;


}

#intro_main_text{

}

.intro_pic1{
    float: left;
    clear: left;

}

<div id="intro_page" class="unseen">
    <div id="intro_page_content">
                    <figure class="intro_pic1">
        <img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
        <figcaption>Sample Image 2015</figcaption>
        </figure>
        <p id="intro_main_text" > Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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. </p>


    </div>
</div>

为什么浮动没有文本换行？

3 个答案: