CSS3 - выровнять <p>и <figure>рядом, внутри <article> - PullRequest
Новая
       18

CSS3 - выровнять <p>и <figure>рядом, внутри <article>

0 голосов
/ 18 мая 2019

Я пытаюсь выровнять p-элемент и элемент figure рядом друг с другом внутри элемента article.

Я попытался выделить фигуру напрямую, присвоив ей атрибут класса, а затем применив float, но в итоге он плавает ниже p-элемента, а не рядом с ним, а затем другой элемент figure перемещается на место первой фигуры-элемента. Первый элемент-цифра также, кажется, выходит за рамки статьи.

Я также пытался нацелить элемент article с помощью селектора, но он не нацелен, и я не знаю, что я делаю неправильно. 

<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-элемент и первый элемент figure были рядом друг с другом.

1 Ответ

0 голосов
/ 18 мая 2019

К сожалению, элементы не всплывают. Плавающий элемент должен находиться перед неплавающим элементом, который он должен установить слева или справа от.

Также обычные блочные контейнеры автоматически не расширяются по высоте, чтобы содержать плавающих потомков. Есть несколько способов сделать это с помощью CSS:

...