Question

当我使用

时

<html>
  <body>
    <p>
      <img style="float:right" src="image1.svg">
    </p>
    <p>
      <img style="float:right" src="image2.svg">
    </p>
    <p>
        text...
    </p>
  </body>
</html>

with image1.svg包含

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200"
     viewBox="0 0 200 200"
     version="1.1">
<g>
    <path d="M 10 10 L 190 10 L 100 190 z"
          fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>

和image2.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200"
     viewBox="0 0 200 200"
     version="1.1">
<g>
    <path d="M 10 10 L 190 10 L 190 190 L 10 190 z"
          fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>

尽管</p><p>，两个SVG图像并排放置。用</br>替换这些并没有用。如何强制将两个图像放在另一个上面？不用说，我想避免构建两个图像的组合。

Answer 1

您可以通过将图像合并到一个包含元素并将该元素向右浮动，同时将clear:both样式应用于单个图像本身来实现此目的。

Here is a working example

<p id="images">
    <img style="float:right" src="image1.svg" />
    <img style="float:right" src="image2.svg" />
</p>
<p>
    text...
</p>

#images{
    float:right;
}
#images img{
    clear:both;
}

Answer 2

Div是个不错的提示。

注意：

没有必要更改（已经微调过的）css文件，为简单起见，此文件中未包含该文件。）
没有必要清除：右图像，只是不将它们添加到第一位。

<html>
  <body>
    <div style="float:right">
      <p>
        <img src="image1.svg">
      </p>
      <p>
        <img src="image2.svg">
      </p>
    </div>
    <p>
        text...
    </p>
  </body>
</html>

Answer 3

如果你真的想让它们单独浮动，你想为这两种风格添加clear: right;。

如果你很高兴将它们一起漂浮在一起，那么将它们的封闭段落包装在一个DIV中并将其浮动到右边。

将两个“浮动：右”图像放在彼此之上

3 个答案: