CSS3 - 在 中并排对齐 和

Question

我正在尝试在文章元素内并排对齐 p 元素和图形元素。

我尝试通过给它一个类属性然后应用 float 来直接选择图形，但它最终漂浮在 p 元素下方，而不是在它旁边，然后另一个图形元素向上移动到该位置第一个图形元素。第一个图形元素似乎也超出了文章之外。

我也尝试过使用选择器来定位文章元素，但它没有被定位，我不知道我做错了什么。

<div id="page">
    <header>
        <nav></nav>
    </header>
    <div id="content">
        <article>Lorem ipsum...</article>
        <article>
            <p>Lorem ipsum...</p>
            <figure>
                <img src="#" alt="#" />
                    <figcaption>This is the figure to be aligned next to the <p>-element</figcaption>
            </figure>
            <figure></figure>
        </article>
    </div>
</div>


figure {
    display: table;
    margin: auto;
}

我希望 p 元素和第一个图形元素彼此相邻。

Answer 1

不幸的是，元素不会浮起来。 float 元素需要位于要设置在其左侧或右侧的非 float 元素之前。

此外，常规 block 容器不会自动扩展高度以包含 float 后代。使用 CSS 有几种方法可以做到这一点:

• > What methods of ‘clearfix’ can I use?
• > How do you keep parents of floated elements from collapsing?