Css 将div粘贴到稍后定义的div的右边框

我在source中定义了以下div：

<div id="container">
    <div id="right">Right</div>
    <div id="left">Left</div>
</div>​

挑战在于#left div的内容可能是任意宽度的，不管宽度是多少，我需要#right div粘贴到#left div的右边框上。有什么办法可以实现吗

感谢您的帮助

---

此外，还有一个小限制：我需要将#left和#right对齐到#container div的边框左侧。

在css中，尝试将它们都向右浮动，如下所示：

#left,#right { float:right; }

完整的CSS

 #container { 
      background:#ddd; 
      width:200px; 
      height:100px; 
 }

 #left, #right { 
      float:right;  
 }

 #left { 
      width:30%; 
      background:green; 
 }

 #right { 
      width:70%; 
      background:blue; 
 }

将两者向左对齐

如果您不使用固定的百分比宽度（或根本不使用宽度），这将导致

div#left

和

div#right

向右浮动，如下所示：

+---------------------------------+
| container                       |
|             +-------+-------+   |
|             | left  | right |   |
|             +-------+-------+   |
+---------------------------------+

如果要将它们向左对齐，请将它们包装在容器div中：

<div id="container-inner"> ... </div>

导致：

+---------------------------------+
| container                       |
| +-------+-------+               |
| | left  | right |               |
| +-------+-------+               |
+---------------------------------+

---

希望有帮助

您可以使用

float:right

将

div#right

和

div#left

移动到正确的位置。还应将

div#left

的右侧与

div#right

对齐

#right, #left {
    float: right;
}

试试这个：

#container{
    margin:10px 10px;
}

#left,#right {
    float:left;
    padding:0px;
    height:100px;
    background-color:#000000;
}
#right{
background-color:#f1f1f1;
}

更好的答案 允许

#right

设置

#left

的边缘，同时通过使用

溢出：隐藏
（）的技巧，为
#left
提供灵活性：

原始答案
我将扩展Rich和JSW189的答案，因为我认为它们是正确的。如果可以，请执行此操作，但随后将容器向左浮动（），这要求在容器上不设置
width
，否则会再次出现问题（）：

#容器{
浮动：左；
}
#右，#左{
浮动：对；
}

当然，有些应用程序不可能做到这一点（比如你想在容器上放置
width
。
听起来很有趣。我有没有办法让这两个一起对齐到容器div的左侧？@Karol你能将
div#right
annd
div#left
放在包装器div中吗？如果是的话，你可以将其浮动到左侧。非常感谢你的帮助！
#right, #left {
    float: right;
}

#container{
    margin:10px 10px;
}

#left,#right {
    float:left;
    padding:0px;
    height:100px;
    background-color:#000000;
}
#right{
background-color:#f1f1f1;
}

#right {
    float: right;
}

#left {
    overflow: hidden; /* this causes non-floated `left` to behave different */
}