html - 如何对齐不同容器中的元素？

Question

如何将标题与“右对齐”容器的左边缘对齐？这是我要实现的目标的草图:

我正在使用 flexbox 和 flex: 1 来创建 50/50 布局。我现在正在尝试将标题放在正确的位置。我的第一个想法是将它放在 aligned-right 子容器中，但是我不希望它扩展到 aligned-left 区域。

使用 flexbox 将子容器与中心线对齐是错误的做法吗？

这是一个缺少该标题的 fiddle : https://jsfiddle.net/cwasdbo4/17/

Answer 1

您可以将 .title 容器放入 .aligned-right 容器并添加(根据您的 fiddle 示例):

    .title {
      margin-top:-20px;
      position:relative;
      width:200%; //or white-space:nowrap;
    }
    .parent-container {
      margin-top:40px;
    }

但它不适用于两行或更多行的长标题(或者如果您动态添加内容)并且对于相对布局绝对无能为力。