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

我正在尝试在商品元素内并排对齐一个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元素和第一个数字元素彼此相邻。

最佳答案

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

同样，常规的块容器不会自动扩展高度以包含浮动后代。使用CSS的方法很少：


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

关于css - CSS3-在<article>内部并排对齐<p>和<figure>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56197391/