3个DIV彼此相邻,中间填充空白

Question

您好我想问你如何将3 DIV放在一起,而中间一个填补第一和第三DIV之间的空白.

我想在第一个第三个DIV中有动态按钮,我需要中间DIV来填充第一和第三个DIV之间的空间.

我会破坏纯CSS/HTML(没有JavaScript)

这是我的尝试:

http://jsfiddle.net/4smx3627/

#wrapper{
height: 30px;
}

#first{
    height: 100%;
    background-color:red;
    float: left;
    display: inline-block;
}

#second{
    height: 100%;
    background-color:green;
    display: inline-block;
}

#third{
    height: 100%;
    background-color:yellow;
    float: right;
    display: inline-block;
}

非常感谢您的任何建议.

Answer 1

有很多方法可以实现这一目标.最准确地反映您的描述的现代方式是"Flexbox",但您可能需要小心浏览器支持.如果您只对最新的浏览器版本感兴趣,那么这是一个不错的选择.这是一个例子

jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

<div class="container">
    <div>first</div>
    <div class="middle">second</div>
    <div>third</div>
</div>

和CSS

.container {
    display: flex;
}

.middle {
    flex-grow: 1;
}

有关浏览器支持,请访问http://caniuse.com/#feat=flexbox