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

概述您好我想问你如何将3 DIV放在一起,而中间一个填补第一和第三DIV之间的空白. 我想在第一个NAD第三个DIV中有动态按钮,我需要中间DIV来填充第一和第三个DIV之间的空间. 我会破坏纯CSS / HTML(没有JavaScript) 这是我的尝试： http://jsfiddle.net/4smx3627/ #wrapper{height: 30px;}#first{ hei 您好我想问你如何将3 div放在一起,而中间一个填补第一和第三div之间的空白.

我想在第一个NAD第三个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;}

非常感谢您的任何建议.

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

Jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

<div >    <div>first</div>    <div >second</div>    <div>third</div></div>

和CSS

.container {    display: flex;}.mIDdle {    flex-grow: 1;}

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

总结

以上是内存溢出为你收集整理的html – 3个DIV彼此相邻,中间填充空白全部内容，希望文章能够帮你解决html – 3个DIV彼此相邻,中间填充空白所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。