复杂的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

之上