时间戳

首页 > 解决方案 > 如何用浮动将一个段落放在另一个段落的下方？

html - 如何用浮动将一个段落放在另一个段落的下方？

问题描述

我正在尝试将我的所有元素放在页面的右侧float: right，我遇到的唯一问题是最后一段的位置，而不是仅仅位于顶部段落的下方，它位于下方并移动到左侧.

在这里，您有一个 JSFiddle 可以更好地了解我的问题。 https://jsfiddle.net/5782o1hg/1/

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">DreamGlass</p>
    <br/>
    <p style="font-size: 20px; float: right">Ola</p>
</div>

我只想把上面的“世界”段落放在下面而不向左移动。

标签： htmlcss

解决方案

最简单的方法是将 'World' 放入 'Hello' 段落中，在两个单词之间添加一个换行符：

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">Hello<br /> World</p>
</div>

推荐阅读