html - 将两个绝对 div 彼此相邻放置而不重叠

Question

我有这样的设置:

<div id="container">

   <div class="left"> 1 </div>

   <div class="left"> 1 </div>

   <div class="right"> 2 </div>

</div>

我想使用 position:absolute 将 left div 放置在彼此后面。工作正常。

我想通过添加 right:0 将 right div 定位到右侧。工作正常。

问题是 left 和 right div 相互重叠。我不想要这个。我希望左侧 div 不与右侧 div 的内容重叠。

我无法为任一 div 设置固定宽度。

请参阅此jsFiddle来演示这个问题。

这是我的 CSS:

#container {
    width:100%;
    position:relative;
}

.left {
  position:absolute;
  background:yellow;
}

.right {
  position:absolute;
  background:green;
  right:0;
}

Answer 1

您可以使用Flexbox和position:absolute来做到这一点。

#container {
  width:100%;
  display: flex;
  align-items: flex-start;
}

.left-wrapper {
  position: relative;
  flex: 1;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  opacity: 0.5;
  background: lightblue;
  margin-top: 10px;
}

.right {
  background:green;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>

或CSS表格和position:absolute

#container {
  display: table;
}

.left-wrapper {
  display: table-cell;
  position: relative;
  vertical-align: top;
  width: 100%;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  margin-top: 10px;
  opacity: 0.5;
  background: lightblue;
}

.right {
  background: green;
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>