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

Question

• 我的布局包含3个DIV s
• 第一个DIV是一个包装器。
• 第二个DIV居中并使用max-width:980px;，否则默认为100％宽度。
• 第三个DIV宽200像素，使用absolute position。 right:-200px和top:0px将其放在第一个DIV
旁边

此布局非常有效，但仅限于最后DIV的宽度为200px。如果DIV的宽度可变，我就无法使用right:-200px，而且无法正确放置。

所以我的问题是如果带DIV的{​​{1}}宽度可变，我该怎么办？如何将它放在主absolute position旁边？

这是我的代码。

DIV

CSS

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

仅供参考：如果浏览器的宽度小于980px，则outer_container .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; } 允许column_outside位于屏幕之外。

Answer 1

让它成为主要的孩子并给它q=downloads.sourceforge.net/project/expat/expat/2.2.0/expat-2.2.0.tar.bz2 timeout 1 wget "$q" wget --continue "$q"

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;
}

Answer 2

您可以使用transform: translateX(100%);将元素移动到元素宽度的右侧。

right: 0;
transform: translateX(100%);

Answer 3

很简单：

.column_outside {
   right: 0px;
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   transform: translateX(100%);
}

演示 https://jsfiddle.net/n4nq6Lxt/

无需更改HTML结构。