如何解决浮动元素高度不一导致元素浮动失效

已于 2023-04-25 15:12:19 修改
阅读量109 收藏
点赞数
分类专栏： css3 前端 文章标签： 前端 html css 浮动 float
于 2023-04-19 22:29:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42220130/article/details/130240880
版权
前端 同时被 2 个专栏收录
40 篇文章 2 订阅
订阅专栏
css3
13 篇文章 0 订阅
订阅专栏

解决方法：多个浮动元素给一个固定高度即可

看到其他博主的方法，但我试了没用
暂时还没找到自适浮动应高度的方法

多个浮动元素，高度不一样，结果有的元素被顶下去掉下去了
在这里插入图片描述
审查元素高度大概是106
在这里插入图片描述

在这里插入图片描述
设置所有图片高度106就可以了
在这里插入图片描述
如果106没有作用，后面加一个!important提升权重

height: 106px!important;

如果加!importnat依旧没用那就再给它加语句max-height

max-height: 106px;
weixin_42220130
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
float元素浮动后高度不一致导致错位的解决办方法
12-13
当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时，就需要想别的办法来解决了： 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:
<li>浮动float 达到水平排列后，<li>元素的高度不一致，如何底部对齐？默认是顶部对齐，
weixin_41678415的博客
05-07 5497
<li>浮动float 达到水平排列后，<li>元素的高度不一致，结果是顶部对齐，如何底部对齐？ 代码为浮动方式。在网上搜索方法时大多遇到的是，下面这三种方式的解决方案。 absolute + bottom vertical-align + inline-block flex + align-items 该三种方式可参考下面的链接： https://...
为什么html浮动高度不一样,多个并列同方向浮动元素高度不一致，如何解决_html/css_WEB-ITnose...
weixin_39617484的博客
06-18 377
首页博客设计相册论坛关于#menu {padding:20px 20px 0 0}/* 固定导航栏位置 */#menu ul {float:right;list-style:none;margin:0px;}/* 添加float：right是的导航栏位于页面右侧 */#menu ul li {float:left;margin:0 10px;display:block;line-height:28...
多元素浮动高度不一致导致的参差不齐问题解决方案
mhx123456789的博客
09-02 102
多元素浮动高度不一致导致的参差不齐问题解决方案
Css浮动元素外层容器高度为0(无高度)的解决方法
09-25
在CSS布局中，浮动元素（如`<li>`）经常被用来创建多列布局或列表样式，但这种情况下，一个常见的问题是外层容器（如`<ul>`）的高度可能会塌陷，即高度变为0，这在不同的浏览器中表现不一。在IE8和Chrome浏览器中尤...
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
在网页布局设计中，浮动（float）是一种常见的技术，它允许元素脱离其正常...在现代浏览器中，这是处理浮动布局导致的父元素高度塌陷问题的首选方案。而对于老旧浏览器的支持，我们仍需考虑添加`zoom: 1`这样的补丁。
DIV+CSS垂直居中一个浮动元素
09-25
为了解决这个问题，我们可以采取一种技巧，即在按钮元素外部包裹一个`span`元素，并将`span`元素设置为浮动，同时保持它的高度与外层`div`相同。同时，我们还需要设置`span`元素的行高（`line-height`）与高度相等，...
CSS 同级元素浮动分析小结
09-22
在同级元素的浮动中，需要特别注意的一点是，一旦元素浮动，它就会脱离文档流，不再占据原来的位置，这可能会导致浮动元素后面的其他元素覆盖或与浮动元素重叠。因此，在处理布局时，有时需要在浮动元素后面添加一个...
在DIV容器中使用浮动元素的方法
09-25
这导致了一个问题，即如果其他非浮动元素紧随其后，它们可能会覆盖浮动元素，因为它们并不知道浮动元素的存在。 第一种解决办法是使用`clear`属性。`clear`属性主要用于控制元素是否可以紧跟在浮动元素后面。有三个...
使用aside标签设置浮动后两边高度不一致问题解决
最新发布
qq_58047273的博客
10-20 171
在设置右浮动后，发现高度不一致的问题（如上图），我们可以改变两个aside标签的编写顺序，以图1代码为例，我们可以将类名为right的aside的标签写在上方，类名为left的aside的标签写在下方们就可以解决高度不一致的问题。
多元素高度不一致浮动错位问题
H-L的博客
04-25 1799
当多元素高度不一致时，经常会出现，元素错位的现象，如下：当给浮动元素加上clear:both后即可完美解决
解决float 浮动+li元素高度不一致造成的“卡住”（错位）
ymruse的博客
12-04 3932
解决float 浮动+li元素高度不一致造成的“卡住”（错位）
设置多个模块（div）高度一致
sunOpar的博客
02-27 7160
实现目的假设你的页面中有几列高度非固定的模块，他们的顶部是对齐的，而他们的高度会随着其内容的增删而变化，你又希望让他们无论如何都能保持高度一致，也就是说高度自适应且保持一致，这时就可以使用以下方法。具体方法1.首先给他们设置一个外包裹层。效果如图： 具体如下 html：<div class="content-wrap">------------外包裹层 <div class="subco
Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论
ahty的专栏
06-17 2484
这两天发现一个问题，就是display为inline-block的元素有内容和没有内容情况下高度不一致，这对于有强迫症的喔来说是受不了的 于是我就进行了一系列的测试来找问题 发生的原因如下： 我直接怀疑是inline-block的影响 在inline或者是block的状态下都没有问题 实验得到： 在字体大小约等于inline-block元素的高度
float高度不一致 导致错位的解决办法
H3前端笔记
11-06 7106
当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时，就需要想别的办法来解决了： 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; ul{ margin:0; padding:0; list-st
哪个声明可以使父元素高度包含浮动元素
05-30
要使父元素高度包含浮动元素，可以使用清除浮动（clear float）的方式。其中，常用的清除浮动的方式是在父元素的样式中添加 `overflow: hidden;` 属性或者在父元素末尾添加一个空的块级元素并设置 `clear: both;` 属性。 例如，假设有一个父元素包含了一个浮动元素，可以使用如下的 CSS 代码来实现父元素高度包含浮动元素： ``` .parent { overflow: hidden; /* 清除浮动 */ } .float { float: left; width: 100px; height: 100px; } ``` 其中，`.parent` 是父元素的类名，`.float` 是浮动元素的类名。通过在父元素的样式中添加 `overflow: hidden;` 属性，就可以清除浮动，并使父元素高度包含浮动元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值