3

我在源代码中定义了以下 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 的边框左侧对齐。

4

4 回答 4

6

您可以使用float: right移动div#right到div#left正确的一侧。div#left那也应该对齐to的右侧div#right。

#right, #left {
    float: right;
}

JS 小提琴示例

于 2012-07-19T16:24:21.593 回答
0

尝试这个：

#container{
    margin:10px 10px;
}

#left,#right {
    float:left;
    padding:0px;
    height:100px;
    background-color:#000000;
}
#right{
background-color:#f1f1f1;
}
于 2012-07-19T16:32:15.017 回答
0

更好的答案

允许#right设置边缘#left，同时仍然#left通过使用技巧来提供灵活性overflow: hidden（参见小提琴）：

#right {
    float: right;
}

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

原始答案

我会扩展 Rich 和 JSW189 的答案，因为我不喜欢将它们正确浮动的可能性。如果可以，请这样做，然后将容器向左浮动（参见小提琴），这要求width容器上没有设置，否则再次出现问题（参见小提琴）：

#container {
    float: left;
}

#right, #left {
    float: right;
}

当然，在某些应用程序中这是不可能的（比如当你想要width在容器上时）。

于 2012-07-19T16:45:15.980 回答
0

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

这是 jsFiddle 中的示例

将它们都向左对齐

如果您不使用固定百分比宽度（或根本不使用宽度），这将导致两者都div#left向右div#right浮动，如下所示：

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

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

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

并应用这个 css：

#container-inner { float:left; }

导致：

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

希望有帮助

于 2012-07-19T16:23:27.127 回答