动态尺寸并排浮动 [英] Dynamically sized side-by-side floats

问题描述

我的HTML如下：

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

这两个div的CSS：

And the CSS for these two divs:

#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％ -container div，并且等于宽度 300px 。

Both of these divs are side-by-side and have the same height. The button-container div is on the right and must have a fixed width of 100px. The left div, however, named list-container needs to have a width equal to the remaining space allocated by the parent container. So for example, if my parent div has a width of 400px, and the button-container div takes up 100px of that, then I should be able to specify something like height: 100% for the list-container div and have that equal to a width of 300px.

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

The absolute #1 rule is that I cannot set a fixed width for the list-container div. The parent div for this whole thing is dynamically resizable, so every child underneath it must be designed to resize with it, hence why this question exists.

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

Keep in mind that this is all being done in a Google Chrome extension, so I have access to HTML5 and CSS3. I also don't need to worry about cross-browser support. I only want this to work in Chrome.

任何人都可以帮我找出如何使 list-container 父容器的剩余空间不使用固定宽度？

Can anyone help me figure out how to make list-container fill the remaining space of the parent container without using a fixed width?

推荐答案

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

You can use the CSS property display: table; and display: table-cell;.

你需要一个包装器div，但这是你需要的额外的标记。

You'll need a wrapper div, but that's all the extra markup you'll need.

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;
}

查看我的示例这里。

这篇关于动态尺寸并排浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！