html - 如何绝对定位未知宽度的DIV

Question

• 我的布局包含 3 个 DIV
• 第一个 DIV 是一个包装器。
• 第二个 DIV 居中并使用 max-width:980px; 否则默认为 100% 宽度。
• 第三个 DIV 为 200px 宽并使用 绝对位置。 right:-200px 和 top:0px 将它放在第一个 DIV
旁边

这种布局非常完美，但这只是因为最后一个 DIV 的宽度为 200px。如果 DIV 的宽度可变，我将无法使用 right:-200px 并且它不会正确放置。

所以我的问题是，如果具有绝对位置 的DIV 具有可变宽度，我该怎么办？我如何将它放在主 DIV 旁边？

这是我的代码。

<div class="outer_container">
<div class="internal_alignment">
    <div class="main_container"></div>
    <div class="column_outside"></div>
</div>              
</div>

CSS

.outer_container {
  overflow: hidden;
  position: relative;
}

.internal_alignment {
  position: relative;
  max-width: 980px;
  margin: 0px auto;
}

.main_container {
  height: 500px;
  background-color: bisque;
}

.column_outside {
  position: absolute;
  top: 0px;
  right: -200px;
  height: 500px;
  width: 200px;
  background-color: black;
}

仅供引用:如果浏览器宽度小于 980 像素，outer_container DIV 允许 column_outside 位于屏幕之外。

Answer 1

让它成为 main 的 child 并给它 left: 100%;

<罢工>

.outer_container {
  overflow: hidden;
  position: relative;
}
.internal_alignment {
  position: relative;
  max-width: 980px;
  margin: 0px auto;
}
.main_container {
  height: 500px;
  background-color: bisque;
}
.column_outside {
  position: absolute;
  top: 0px;
  left: 100%;
  height: 500px;
  width: 200px;
  background-color: black;
}

<div class="outer_container">
  <div class="internal_alignment">
    <div class="main_container">

       <div class="column_outside"></div>
    </div>
  </div>
</div>

---

再三考虑，干脆使用left: 100%而不是 right: -200px;

.outer_container {
  overflow: hidden;
  position: relative;
}
.internal_alignment {
  position: relative;
  max-width: 980px;
  margin: 0px auto;
}
.main_container {
  height: 500px;
  background-color: bisque;
}
.column_outside {
  position: absolute;
  top: 0px;
  left: 100%;
  height: 500px;
  width: 200px;
  background-color: black;
}

<div class="outer_container">
  <div class="internal_alignment">
    <div class="main_container"></div>
    <div class="column_outside"></div>
  </div>
</div>