CSS3 - 在 <article> 内并排对齐 <p> 和 <figure>

Question

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

我尝试通过给它一个类属性然后应用浮动来直接选择图形，但它最终浮动在 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

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

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

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