我在内容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;添加到红色浏览器.)
