Html 如何绝对定位未知宽度的DIV 我的布局由3个DIVs组成 第一个DIV是一个包装器 第二个DIV居中，使用最大宽度：980px否则默认为100%宽度 第三个DIV宽200px，使用绝对位置右侧：-200px和顶部：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>

仅供参考：如果浏览器的宽度小于980px，则外部容器DIV

允许外部列位于屏幕外部。

您可以使用

transform:translateX（100%）它所做的是将元素移动到元素本身宽度的右侧

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

非常简单：

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

演示

无需更改HTML结构。
将其作为main的子级，并将其
左：100%


。外部容器{
溢出：隐藏；
位置：相对位置；
}
.内部校准{
位置：相对位置；
最大宽度：980px；
保证金：0px自动；
}
.主集装箱{
高度：500px；
背景色：深蓝色；
}
.外柱{
位置：绝对位置；
顶部：0px；
左：100%；
高度：500px；
宽度：200px；
背景色：黑色；
}

所有3种解决方案都非常有效（谢谢！），但您的是最短的。我把一些单词放在了外面的列u中，
DIV
变得超窄了。我增加了
最小宽度：100px和布局仍然完美地结合在一起。我有很多东西要学。8-）我将记住
变换
。我知道它会派上用场的。
.column_outside {
   right: 0px;
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   transform: translateX(100%);
}