Question

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

我想在第一个NAD第三个DIV中使用动态按钮，我需要中间DIV来填充第一和第三个DIV之间的空间。

我会破坏纯CSS / HTML（无JavaScript）

这是我的尝试：

#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

Answer 2

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

JS Bin Here

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。

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

2 个答案: