将 DIV 放在两个较低的 DIV 之间和之上

Question

我正在设计一个需要至少三个 DIV 和可能一个容器 DIV 的网页。我需要一个 DIV 在左边，一个在中间，一个在右边。看起来很简单，但我还需要两个侧面的 DIV 来覆盖中间的 DIV。

                                  +-----------------------+
          +-----------------------|-----+           +---------------------------+
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |     o     |     |                     |
          |                       |     |     v     |     |                     |
          |                       |     |     e     |     |                     |
          |       50% width       |     |     r     |     |       50% width     |
          |                       |     |     l     |     |                     |
          |                       |     |     a     |     |                     |
          |                       |     |     y     |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          |                       |     |           |     |                     |
          +-----------------------|-----+           +---------------------------+
                                  +-----------------------+

我从另一个 StackOverflow 答案中看到了这一点，但我似乎无法水平翻译它：http://jsfiddle.net/PWwQM/1/

请帮忙。

Answer 1

诀窍是使用 float 属性来并排获取外部 div：float:left; 我认为这就是你想要的，无论如何：

http://jsfiddle.net/SuTLq/

您的图表显示了外部 div 之间的排水沟，但我没有创建一个，因为您写道外部 div 每个都是宽度的 50%。

Answer 2

只需将position absolute 用于中间一个即可。检查此fiddle。