Question

嗯，这听起来很简单，但我被困在这里。

<div id="newPage">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisl turpis, eget      faucibus diam. Fusce id magna quis enim elementum imperdiet. Proin sit amet purus lacus, id placerat nulla. Quisque interdum, velit eget tempor aliquet, lorem neque pharetra nisi, a .</p>
    <img src="images/layout/nokia.gif" />
</div>

现在，我想将图像放在右侧，将段落放在左侧。（注意：它必须在单个div标签内。）

Answer 1

交换img和p标记，然后将float:right应用于img。

Answer 2

您可以使用css属性float 检查this page。

Answer 3

在图片标记后面加<p>标记，并将align属性赋予图片标记，就像这样。

<img src="images/layout/nokia.gif" align="right"/>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
in nisl turpis, eget faucibus diam. Fusce id magna quis enim elementum
imperdiet. Proin sit amet purus lacus, id placerat nulla. Quisque
interdum, velit eget tempor aliquet, lorem neque pharetra nisi, a .
Lorem ipsum dolor      sit amet, consectetur adipiscing elit. Aliquam
in nisl turpis, eget faucibus diam. Fusce id magna quis enim elementum</p>

Answer 4

img { float:right; }

你应该给浮动：对img标签。因此，img右对齐，p左对齐

Answer 5

你可以使用浮点数，但是由于一个div的限制，你必须指定文本的宽度，以确保页面的宽度保持在浏览器窗口内（或者图像将包裹在文本下面）可选你可以指定页面的总宽度，这将停止换行：

<style>
    #newPage {float: left; width: 800px;} /* Optional */
    #newPage p {float: left; width: 720px;}
    #newPage img {float: right;}
</style>

<div id="newPage">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisl turpis, eget      faucibus diam. Fusce id magna quis enim elementum imperdiet. Proin sit amet purus lacus, id placerat nulla. Quisque interdum, velit eget tempor aliquet, lorem neque pharetra nisi, a.</p>
<img src="images/layout/nokia.gif"/>
</div>

如何用图像替换段落？

5 个答案: