html - 如何使用 CSS 将元素与其 sibling 的 child 对齐？

Question

这是我正在使用的基本 html 结构:

<main>
    <article>
        <header></header>
        <div class="article-content"></div>
    </article>
</main>
<aside>
    <div class="aside-content"></div>
</aside>

通过使用 Bootstrap 4，我将主要部分和旁边元素并排放置:

<div class="row">
    <div class="col-md-8">
        <main>
            <article>
                <header></header>
                <div class="article-content"></div>
            </article>
        </main>
    </div>
    <div class="col-md-4">
        <aside>
            <div class="aside-content"></div>
        </aside>
    </div>
</div>

这给了我这个:

但是我想要实现的是使侧边栏内容与文章内容在同一点开始，即在标题部分下方，如下所示:

但我需要保持最开始的基本 HTML 结构。 重点是 aside 元素应该保留在 main 元素之外，但是它的内容应该从 header 元素开始(它是 main 元素的子元素)。

使用 jQuery 很容易实现这一点，方法是找出标题的计算高度，然后将其设置为旁边的顶部填充。

是否可以仅使用 CSS 实现此目的？

Answer 1

您可以修改 html 以便标题位于另一行吗？如果是这样，您可以在顶部添加另一行，其中仅包含带有 .col-md-8 的标题，以便与文章内容一样广泛。

这是一个jsfiddle

<div class="row">
  <div class="col-md-8">
    <header><h1>Some long Header of an article</h1></header>
  </div>
</div>
<div class="row">
    <div class="col-md-8">
        <main>
            <article>

                <div class="article-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus lorem. Duis fermentum erat id ex porttitor, eget sollicitudin lorem blandit. Duis tellus leo, dictum a mauris sed, sollicitudin aliquam enim. Maecenas purus orci, luctus nec orci eu, tempor volutpat tellus. Aliquam pretium lorem justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sollicitudin nisi ipsum, quis dignissim turpis cursus at. Donec euismod egestas sapien, at dignissim urna eleifend fringilla. Nunc malesuada velit eu nunc faucibus fermentum. Vestibulum tempus in arcu vel posuere. Fusce efficitur pretium dolor, eu condimentum turpis. Nam gravida bibendum sapien nec hendrerit. Proin leo nulla, elementum ut augue sit amet, lobortis efficitur quam.</div>
            </article>
        </main>
    </div>
    <div class="col-md-4">
        <aside>
        <div class="aside-content"><h3>Sidebar</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        </aside>
    </div>
</div>