我正在尝试在文章元素内并排对齐 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 元素和第一个图形元素彼此相邻。
最佳答案
不幸的是，元素不会浮起来。 float 元素需要位于要设置在其左侧或右侧的非 float 元素之前。
此外，常规 block 容器不会自动扩展高度以包含 float 后代。使用 CSS 有几种方法可以做到这一点:
关于CSS3 - 在 <article> 中并排对齐 <p> 和 <figure>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56197391/