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

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

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

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

1 个答案: