三张单人床，中间填满空隙

Hello I would like to ask you how to put 3 DIV next to each other while middle one is filling the void between first and third DIV.

你好，我想问你如何把3个DIV放在一起，而中间的一个正在填补第一个和第三个DIV之间的空白。

I would like to to have dynamic buttons in first nad third DIV and I need the middle DIV to fill the space between DIV one and three.

我希望在第一个nad第三个DIV中有动态按钮，我需要中间的DIV来填充DIV 1和3之间的空间。

I would brefer pure CSS / HTML (no JavaScript)

我喜欢纯CSS / HTML(没有JavaScript)

Here is my try:

这是我的尝试:

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

Thank you very much for any advice.

非常感谢您的建议。

2 个解决方案

#1

There are many ways to achieve this. A modern way which most accurately reflects your description is "Flexbox", however you may need to be careful of browser support. If you're only interested in the latest browser versions, it's a good option. Here's an example

实现这一点有很多方法。最准确地反映你的描述的现代方式是“Flexbox”，不过你可能需要小心浏览器的支持。如果你只对最新的浏览器版本感兴趣，这是一个不错的选择。这里有一个例子

jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

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

And CSS

和CSS

.container {
    display: flex;
}

.middle {
    flex-grow: 1;
}

For browser support, see http://caniuse.com/#feat=flexbox

有关浏览器支持，请参见http://caniuse.com/#feat=flexbox

#2

You'll need to float left and right. But pay attention to the order in the HTML. Floats are first then the middle div.

你需要左右浮动。但是请注意HTML中的顺序。浮动首先是中间的div。

JS Bin Here

JS本在这里

body{
  margin:0 auto;
}
div{
 margin:0 auto;
  border:0px solid;
 height:200px;
  display:block;
}
#one {
  width:20%;
  float:left;
}

#two {
  width:60%;


}

#three {
  width:20%;
  float:right;
}

Edit: changed borders to background colors for easier viewing of divs.

编辑:将边界更改为背景色，以便更容易地查看div。

#1