一尘不染

并排两个div,一个100%宽度,其他宽度取决于内容

css

我想并排放置两个DIV标签而不使用固定宽度。第一个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>

感谢您的答复!


阅读 406

收藏
2020-05-16

共1个答案

一尘不染

left {

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

这适用于所有现代浏览器和IE7 +。

左列将与其中的内容完全一样宽。右列将占用剩余空间。

2020-05-16