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

发布时间：2020-12-14 18:30:58 所属栏目：资源来源：网络整理

导读：我在内容div中有三个div,当浏览器调整大小时蓝色和红色div必须具有固定宽度绿色div必须调整到左侧空间我也在css中试过这个 .yellow{ height: 100%; width: 100%;}.red{ height: 100%; width:200px; display:inline-block; background-color: red;}.green{

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!