html - 浮动在正常内容之后出现的元素

Question

我有问题。在下面的标记中，有一个 side-element，其中包含我想要显示的用户附加信息，如附图所示（右浮动）。

<section>
    <h2>site title</h2>
    <p>that's the site's main content</p>
    <aside>
        <h3>other stuff</h3>
        <div>cloud tag</div>
    </aside>
</section>

但是，我不想将 side-element 放在 h2-element 之前，然后将其浮动。我知道这会奏效，但不知何故，这对我来说似乎是错误的。可以说，搜索引擎知道它是不太重要的内容，因为它包含在一个备用元素中。

但我也希望 side-element 表现得当页面宽度变小（例如较小的设备）时，aside 元素保持在主要内容之下。

所以我的问题是：有没有可能如图所示浮动边元素，而不操纵标记顺序（添加帮助 div 是可以的，我猜）。

已经谢谢了，期待。

Answer 1

您需要将主要内容包装在一个 div 中，然后添加float: left到主要 div 和您的 side 元素。然后，只需使用该margin属性将它们适当地隔开。

HTML

<section>
    <div class="main">
        <h2>site title</h2>
        <p>that's the site's main content</p>
    </div>
    <aside>
        <h3>other stuff</h3>
        <div>cloud tag</div>
    </aside>
</section>

CSS

.main {
    float: left;
}
aside {
    float: left;
}

见演示。