首页 > 原创文章 > 软件开发 > 查看文章

Css中Flex布局下两边高度不一致的解决方法

所属分类:软件开发 来源: 丁老师原创 更新时间:2025-09-15 09:26 浏览: 2351 IP属地: 深圳

在css中,flex弹性布局可以实现内部对象左右、垂直的对齐,在多个html对象中,设置flex后一般情况下,内部的对象高度是保持一致的。比如一个div设置了flex,内部有3个div,这3个div的高度以最高的一个div高度值为准保持一致,如图。

image.png

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        .flex {display:flex;}
        .left {background-color:#fa0;width:100px;}
        .middle {background-color:#3af;width:200px;}
        .right {background-color:#cddc39;width:300px;height:200px;}
    </style>
</head>
<body>
    <div class="flex">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
</body>
</html>

但是有时候也会发生高度不一致的情况,如图:

image.png

经过代码检查后,发现是align-items设置所引起的。如果设置align-items:normal,就会使div高度保持一致,如果不是normal,div的高度就不一致。

#使内部div的高度不一致,以各自高度为准
.flex {display:flex;align-items:flex-start;}

#使内部div的高度一致,以最高高度为准
.flex {display:flex;align-items:normal;}


标签:

相关文章

微信小程序开发用Vue2和Vue3好?有什么...

有新入行同学向丁老师咨询,在使用Uniapp做微信小程序时,是选择Vue2还是Vue3呢?哪个开发微信小程序更好一点,两者有什么区别呢?今天丁老师给大家介绍一下。首先,我们来介绍一下Vue2和Vue3。Vue2和Vue3是Vue.js框...

Nginx环境下php页面总是缓存刷新也不行...

nginx环境下php页面总是缓存刷新也不行的解决办法

Jquery滚动到指定位置的方法

众所周知,Html可以利用锚点,即<a name的属性来快速定位网页位置,但是那个方法点一下网页直接就跳过去了,用户体验度不是很好。怎么实现网页可以平滑丝滑的滚动到网页指定位置呢?其实很简单,用jquery的animate方法即可...

Mysql 1267 Illegal mix...

这个问题,用普通sql语句查询,好解决,把表的字符编码改为对应的就可以了。 但在使用视图查询时,比如select 'aaa' as type from xxx; select * from view where typ...

推荐文章

BT宝塔升级方法

由老版本7.2自动升级时,会出现很多问题,建议在终端手动升级。升级命令:curl http://download.bt.cn/install/update_panel.sh|bash

FastAdmin btn-dialog按钮...

fastadmin里自定义按钮的btn-dialog,弹出窗口时默认大小,设置了data-area无效,经过研究后,发现了可用的方法,直接上代码不废话:table.on('post-body.bs.table',functi...

宝塔"在未指定SSL默认站点时,未开启SSL...

宝塔系统相关问题解决方法

微信公众号如何集成对接网站网页

微信公众号可以把官网的网页集成进去吗?想通过微信公众号实现打开公司网站的页面,具体要怎么实现呢?其实这个功能,可以通过微信菜单的方式来实现...