Question

我有一个基本问题。两个<div>并排，左<div>需要能够具有'灵活'宽度，就像右边的<div>未显示时一样，然后，左<div>将延伸至100％。

我的代码目前如下，不符合上述要求。

<html>
        <head>
        <style>
        #container {
                display: block;
        }

        #box-left {
                width: 100%;
                height: 100px;
                background-color: red;
                float: left;
        }

        #box-right {
                width: 15%;
                height: 100px;
                background-color: blue;
                float: right;
        }
        </style>
        </head>
        <div id="container">
                <div id="box-left"></div>
                <div id="box-right"></div>
        </div>
        <body>

        </body>

任何指针都会非常感激。

Answer 1

#container {
  display: table;
  table-layout: fixed;
}
#id-right, #id-left {
  display: table-cell;
  float: none;
}
#id-left {
  /* no width */
}
#id-right {
  width: 15%;
}

不幸的是，这在IE6中不起作用，但除此之外它应该可以解决问题。

Answer 2

您是否尝试将max-width:100%;用于'box-left'？

Answer 3

如果您颠倒了#box-left和#box-right在HTML中的显示顺序，并从CSS中的width中删除了#box-left属性，那么它应该如何运作描述：

#box-left {
        height: 100px;
        background-color: red;
        float: left;
}

...

<div id="container">
        <div id="box-right"></div>
        <div id="box-left"></div>
</div>

您可能不需要该源顺序，在这种情况下<table>（或等效的CSS）是唯一允许您想要执行的HTML / CSS布局系统。

Answer 4

将左侧div的宽度设置为您拥有的其余空间。所以，因为你的盒子右边是15％，所以让你的盒子留下85％

这是代码：

#container {
                display: block;
        }

        #box-left {
                width: 85%;
                height: 100px;
                background-color: red;
                float: left;
        }

        #box-right {
                width: 15%;
                height: 100px;
                background-color: blue;
                float: right;
        }

如何将两个<div>并排放置，左侧<div>占用未占用右侧<div>的100％空间？</div> </div> </div>

4 个答案: