Question

我在源代码中定义了以下div：

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

我无法对它们进行重新排序，因此我必须使用CSS，以便它们在页面上显示如下：

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

挑战是#left div的内容可以是任意宽度，无论宽度是多少，我都需要#right div坚持#left div的右边界。任何想法如何实现？

任何帮助表示赞赏！

此外，还有一个小约束：我需要#left和#right对齐#container div边框的左边。

Answer 1

您可以使用float: right将div#right和div#left移至正确的一侧。这也应该将div#left的右侧与div#right对齐。

#right, #left {
    float: right;
}

JS Fiddle Example

Answer 2

在你的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; 
 }

Here's the example in jsFiddle

将它们对齐左侧

如果你没有使用固定的百分比宽度（或根本没有宽度），这将导致div#left和div#right向右浮动，如下所示：

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

如果您想将它们对齐到左侧，请将它们包装在容器div中：

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

并应用此css：

#container-inner { float:left; }

导致：

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

希望有所帮助

Answer 3

试试这个：

#container{
    margin:10px 10px;
}

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

Answer 4

更好的答案

允许#right设置#left的边缘，同时通过使用#left（see fiddle）的技巧仍然可以灵活地overflow: hidden：

#right {
    float: right;
}

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

原始答案

我会扩展Rich和JSW189的答案，我do not like the possibilities只是将它们正确地浮动。如果可以，那么这样做，但然后向左浮动容器（see the fiddle），这要求在容器上没有设置width，否则再次出现问题（see fiddle）：< / p>

#container {
    float: left;
}

#right, #left {
    float: right;
}

当然， 有些应用程序无法实现 （就像您希望容器上有width一样。

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

4 个答案:

更好的答案

原始答案