我在内容div中有三个div,当浏览器调整大小时
我也在css中尝试过
.yellow{
height: 100%;
width: 100%;
}
.red{
height: 100%;
width:200px;
display:inline-block;
background-color: red;
}
.green{
height: 100%;
min-width:400px;
display:inline-block;
background-color:green;
}
.blue{
height: 100%;
width:400px;
display:inline-block;
background-color: blue;
}
此代码不会调整绿色div的大小,在某些浏览器中红色面板不会显示
我也试过float: left
和
display: -webkit-flex;
display: flex;
但无法正常工作。这个怎么做?
使用flex-grow
。将蓝色和红色容器设置为0,将绿色容器设置为大:
.red{
height: 100%;
width:200px;
flex-grow: 0;
display:inline-block;
background-color: red;
}
.green{
height: 100%;
min-width:400px;
flex-grow: 1000;
display:inline-block;
background-color:green;
}
.blue{
height: 100%;
width:400px;
flex-grow: 0;
display:inline-block;
background-color: blue;
}
可以在这里找到一个很好的备忘单:https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
另外,不要忘记其他属性,例如display: flex;
和justify-content: space-between
。在上面的链接中对此进行了完美的解释。
但是请注意,您不必使用flexbox。您可以使用实现相同的功能float
,从而使其与旧版浏览器兼容(为此,只需使用display: block;
并添加float: left
到蓝色div和float: right;
红色div中。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句