两个并排的div，一个宽度100%，另一个宽度取决于内容。

Question

两个并排的div，一个宽度100%，另一个宽度取决于内容。

26

我想将两个 DIV 标签并排放置，而不使用固定宽度。第一个 div 标签根据其内容扩展，第二个 div 标签应填充剩余空间。此外，这两个 div 标签必须不重叠，因为它们具有透明背景图像，如果重叠则会显眼。我尝试了所有可能的方法，但是不能使用 DIV 标签找到解决方案。

我可以使用 TABLE 进行此操作，但是是否可以使用 DIV 进行操作？或者说这是 DIV 无法做到的事情之一吗？

以下是代码：

            #right{
              background: green;     
              width: 100%;
            }
            #left {
              margin-top: 5px; /* to test if they intersect*/
              background: red;
            }  
            #container {
               width: 800px;
            }
            <div id="container">
               <div id="left"> This div is as big as it's content</div>
               <div id="right"> rest of space</div>
            </div>

谢谢回复！

- blejzz

是的，我目前使用的是表格，但是我想知道是否可以使用 DIV 完成。 - blejzz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

参见：http://jsfiddle.net/kGpdM/

#left {
    background: #aaa;
    float: left
}
#right {
    background: cyan;
    overflow: hidden
}

在所有现代浏览器和IE7+中都可以使用此方法。

左列的宽度将与其中内容的宽度完全相同。右列将占用其余空间。

overflow: hidden 的“技巧”在这个答案后面的链接中被解释了。