动态大小的并排浮动

Question

我的 HTML 如下：

<div id="list-container"> </div>
<div id="button-container"> </div>

以及这两个 div 的 CSS：

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

这两个 div 并排并具有相同的高度。 button-container div 位于右侧，并且必须具有固定宽度 100px。但是，名为 list-container 的左侧 div 的宽度需要等于父容器分配的剩余空间。因此，例如，如果我的父 div 的宽度为400px，而button-container div 占据了其中的100px，那么我应该能够为height: 100% 指定类似height: 100% 的内容@ div 并具有等于300px的宽度。

绝对的#1 规则是我不能为list-container div 设置固定宽度。整个事情的父 div 是可动态调整大小的，因此它下面的每个孩子都必须设计为随它调整大小，这就是为什么存在这个问题。

请记住，这一切都是在 Google Chrome 扩展程序中完成的，因此我可以访问 HTML5 和 CSS3。我也不需要担心跨浏览器支持。我只希望它在 Chrome 中工作。

谁能帮我弄清楚如何在不使用固定宽度的情况下让list-container 填充父容器的剩余空间？

Answer 1

您可以使用 CSS 属性 display: table; 和 display: table-cell;。

这模仿了表格处理其行的方式，但将其应用于 div。

您需要一个包装器 div，但这就是您需要的所有额外标记。

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

CSS：

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

看我的例子here。

Answer 2

本网站可能对您有所帮助：

http://glish.com/css/

Answer 3

将左侧容器设置为 100%，并为其赋予 100 像素的右边距。我原来的回答也说填充，但那是错误的。边距为浮动的右 div 创造空间。百分比宽度允许左 div 动态调整大小。