HTML – 如何并排排列三个flex div

概述我在内容div中有三个div,当浏览器调整大小时 >蓝色和红色div必须具有固定宽度 >绿色div必须调整到左侧空间 我也在css中试过这个 .yellow{ height: 100%; width: 100%;}.red{ height: 100%; width:200px; display:inline-block; background-c 我在内容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;}

此代码不会调整绿色div,在某些浏览器中红色面板不显示

我也试过漂浮：左和

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

总结

以上是内存溢出为你收集整理的HTML – 如何并排排列三个flex div全部内容，希望文章能够帮你解决HTML – 如何并排排列三个flex div所遇到的程序开发问题。

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