我在内容div中有三个div,当浏览器调整大小时
>蓝色和红色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;
}
我也试过漂浮：左和
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;添加到红色浏览器.)
