Question

我有一个div用作其他3个div的容器。这些都是使用float:left水平排列的。我需要left和right div来保持相同的固定宽度40px 。我希望中间div动态扩展 - 如果可能的话只使用CSS。

这是一个我正在试验的JSFiddle：http://jsfiddle.net/xJB9n/

如果你将我的.middle CSS类的宽度更新为620px，这就是我正在寻找的结果，middle div尽可能地扩展，同时保持水平与其他两个div对齐。

无论container的宽度如何，我希望中间div始终扩展到剩下的区域的100％，并设置：

width: 100%;

没有做到这一点。有谁知道如何实现这个目标？

Answer 1

如果您可以更改标记，则可能有效：

<div class="container">
    <div class="left"></div>  
    <div class="right"></div>
    <div class="middle"></div>
</div>

使用以下CSS：

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

请参阅this fiddle。

或者你可以使用绝对定位，虽然这可能是IE7及以下的痛苦。这确实允许您保持DOM顺序。

<div class="container">
    <div class="left"></div>  
    <div class="middle"></div>
    <div class="right"></div>
</div>

使用此（相关）CSS：

.container { position: relative; }

.left  { position: absolute; left: 0;  top: 0; }
.right { position: absolute; right: 0; top: 0; }

.middle { margin: 0 40px; }

请参阅this fiddle了解演示。

Answer 2

不知道您是否可以使用flexbox，但以下内容适用于Chrome，Firefox和Safari。

.container
{
    height: 100px;
    width: 700px;
    border: 1px solid black;
    display: box;
    display: -moz-box;
    display: -webkit-box;
}

.left, .right
{
    height: 100%;
    width: 40px;
    background-color: red;
    -moz-box-flex: none;
    -webkit-box-flex: none;
    box-flex: none;
}

.middle
{
    background-color: blue;
    height: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

你可以看到小提琴http://jsfiddle.net/sx2Sg/

Answer 3

除了@Jeroen的CSS之外，您还需要添加一件事：

html, body {
    height: 100%;
}

.middle {
    height: 100%;
    margin: 0 40px;
}  

.left {
    width: 40px;
    float: left;
}

.right {
    width: 40px;
    float: right;
}

我添加的内容是将height实际设置为100％。如果父元素的高度设置为100％，则不能将高度100％应用于子元素。

请参阅此fiddle了解演示。

Answer 4

从你的结构。 2个选项：

display:table
display:flex

display:table适用于所有浏览器，包括IE8。 Display:flex仍在增长，尚未成熟，许多浏览器都遇到了困难。那我只建议display:table; http://jsfiddle.net/xJB9n/1/

不要误会，它只是CSS，你的标记中没有<table>。

force元素在固定宽度元素之间使用100％的可用空间？

4 个答案: