三个DIV并排，中间填充空白。

Question

你好，我想问一下如何将3个DIV并排放置，而中间的一个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;
}

非常感谢任何建议。

- Teamol

---

你试过了吗？能提供一个 jsfiddle 吗？ - Niranjan Borawake

是的，我尝试过了，但这就是我能想到的全部：http://jsfiddle.net/4smx3627/ - Teamol

将它做成一个表格...每个div都作为“table-cell”，并将边缘的宽度设为“1%”。 - vsync

Answer 1

有很多方法可以实现这个目标。最符合您描述的现代方法是“Flexbox”，但您需要注意浏览器支持情况。如果您只关心最新的浏览器版本，那么这是一个不错的选择。下面是一个例子：

jsfiddle http://jsfiddle.net/sxx65mhq/

<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

。

- CupawnTae

Answer 2

你需要左浮动和右浮动。但要注意HTML中的顺序。浮动元素先于中间的div。

JS Bin在这里

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

编辑：将边框改为背景颜色，使div更易于查看。

- Gary Hayes

---

最好在＃one和＃three上指定绝对宽度，而在＃two上不指定宽度，例如：http://jsbin.com/solonadimame/1/edit - CupawnTae

这取决于原帖发布者。原帖发布者的问题比较模糊，让他们根据需要进行调整。 - Gary Hayes

我只是想提供帮助 - 问题说“中间DIV填充空间”，这对我来说强烈暗示其他div不应该扩展以填充空间。 - CupawnTae

没错...作为第一个回答的人最糟糕的地方就是当他们在问题后面添加更多内容时。我现在甚至看到上面还有一个Fiddle。 - Gary Hayes