如何使用CSS将元素与兄弟姐妹的孩子对齐？

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元素（其为{{1 }}元素。

使用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>