css - 复杂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 之上