复杂的DIV定位

Question

我正在尝试使用尽可能少的容器来实现特定的布局，但是对于是否可以做到这一点我感到很困惑。布局如下图：

....................
....................
           .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||           
||||||||||||||||||||
||||||||||||||||||||

现在，我了解到可以在 ||| 内容的顶部和右侧以及 ... 内容的底部和左侧使用适当的填充来实现两个组件之间的间距。

但是，有没有办法只使用 2 个主要容器并实现这样的布局？可以假设两个容器的内容都是文本，整个容器的宽度是固定的。

也就是说，我正在寻找一个看起来像这样的结构：

<div class="content" width="800px">
    <div id="content-a">
        ..............................................
    </div>
    <div id="content-b">
        ||||||||||||||||||||||||||||||||||||||||||||||
    </div>
</div>

适当的样式和定位已分配给 content-a 和 content-b 以产生显示的布局。 DIV 的确切嵌套并不重要，但将其限制为每条内容 1 个 DIV。

Answer 1

我认为这可能的唯一方法是使用绝对位置，一个在另一个之上，并且两个 div 中的透明图像会使文本环绕它

....................
....................
           .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........

在 content-a 中，| 将是透明图像。

在 content-b 中，. 将是透明图像。

|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||           
||||||||||||||||||||
||||||||||||||||||||

然后你将 content-b 放在 content-a 之上