子元素浮动后，两个子元素高度不一样，父元素自适应高度，子元素自适应为相同高度

最新推荐文章于 2023-09-10 22:28:58 发布
最新推荐文章于 2023-09-10 22:28:58 发布
阅读量1.5k 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34438192/article/details/78153960
版权
当右侧子元素高度大于左侧时，通过CSS样式设置，使父元素自动扩展高度，并保持两侧子元素等高。使用overflow: hidden, position: relative及absolute定位实现效果。" 111381484,10296448,DeconvNet详解：上采样与反卷积在语义分割中的应用,"['深度学习', '卷积神经网络', '图像处理', '语义分割', '计算机视觉']
摘要由CSDN通过智能技术生成


//只适用于右边的比左边的高度长

<style> 

  .parent_elem { overflow: hidden;  position: relative;}

  .right {  float: right; width: 92%; }

  .left {  float: left;width: 8%; }

  .left_pos { position:

最低0.47元/天 解锁文章
小白小白更努力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: ”main”> ”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容...
Css浮动元素外层容器高度为0(无高度)的解决方法
09-25
在CSS布局中，浮动元素（如`<li>`）经常被用来创建多列布局或列表样式，但这种情况下，一个常见的问题是外层容器（如`<ul>`）的高度可能会塌陷，即高度变为0，这在不同的浏览器中表现不一。在IE8和Chrome浏览器中尤...
【css】div父元素根据子元素高度自适应高度
weixin_30654419的博客
04-24 906
两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！ 解决这个问题的根源就是清除浮动： 1 , 给父节点增...
清除浮动，浮动元素的高度自适应问题
weixin_34087503的博客
03-06 96
一、问题 当有时不浮动的父元素装载着浮动的子元素时，这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大。比如截图的第一行图，上面一条黑色的粗线，就是父div的边框（为了看效果，我设置了父div的border：5px。左右两边是各浮动一个div）。 于是乎，我想解决这个父元素高度不会跟随着子元素的内容而变化的问题。谷歌了一下，找到答案 二、解决方法 参考来源：http://www...
浮动元素父元素高度自适应（高度塌陷）
weixin_49757069的博客
08-25 294
浮动元素父元素高度自适应（高度塌陷） 当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷 高度塌陷的解决方法 hack1：给父元素添加声明overflow:hidden;(触发一个BFC) （缺点：超出元素会被隐藏） hack2:在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;} （缺点：造成代码冗余） hack3:万能清除浮动法 选择符:after{content:"";clear:bo...
多元素高度不一致浮动错位问题
H-L的博客
04-25 1796
当多元素高度不一致时，经常会出现，元素错位的现象，如下：当给浮动元素加上clear:both后即可完美解决
DIV 子DIV为浮动时如何自适用高度
leaneam的博客
01-09 370
在父DIV中后面增加一个DIV <div class="bbc"></div> </div> .bbc{ clear:both; height:0; font-size: 1px; line-height: 0px; }
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
当一个父元素内的所有子元素都设置了浮动，如果没有指定父元素的高度，那么父元素的高度会自动塌缩到0，因为它不再包含这些浮动的子元素。这可能导致父元素背景颜色、边框等无法正确显示，甚至影响到页面其他部分的...
父元素与子元素之间的margin-top问题(css hack)
09-25
在HTML结构中，如果一个父元素包含一个子元素，且两者之间没有内边距（`padding`）或边框（`border`），那么根据CSS规范，这两个元素的`margin-top`可能会合并，导致父元素的顶部位置受到子元素`margin-top`的影响。...
float元素浮动后高度不一致导致错位的解决办方法
09-25
然而，当多个浮动元素（如`<li>`列表项）的高度不一致时，可能会出现“错位”问题，即后续元素会因前一个元素的高度差异而挤到同一行，破坏原有的布局结构。这个问题在标题和描述中被明确提出，解决这个问题有几种...
angualr：CSS一个div内两个子元素的高度自适应
最新发布
Cloud Flower的博客-专注unity
09-10 783
问题：如题参考：
三种方法解决浮动元素父容器高度自适应问题
Webstandards
06-15 1111
浮动元素由于脱离了文档流，无法撑起其父元素的高度，如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种： 方法一：让浮动元素后面紧跟一个用于清除浮动的空标签。完整代码： DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
css多个行内块级元素同处一行，高度不同时排版问题
Amiel_Tian的博客
12-23 1548
当多个 元素 设置 display: inline-block; ，某个高度与其他不同时，会出现这种排版情况 例如：案由 与 时间 为 行内块级元素，案由 由于文字高度增高，导致排版错乱 解决 设置css属性 vertical-align: text-top; ，调整 元素 垂直对其 方式 ...
flex布局后，子元素高度如何保持自身高度
qq_37332077的博客
04-22 4902
以下为不设置任何css情况下，正常流布局。图片和文字属于行内元素，图文环绕展示。 需求：图片和文字单独各一列，且各自显示正常的自身高度 **解决办法：**设置容器p的布局为flex布局，display：flex。此时flex布局内的子元素会默认水平显示。 出现新问题，子元素里的图片高度不对了，取的是父容器p里子元素的最大高度，原因是： 这是因为Flex 布局会默认： ● 把所有子项变成水平排列。 ● 默认不自动换行。 ● 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。 这样设置背景色的时候非常
解决子块Float浮动后，父块高度自适应问题
厚积薄发
01-12 697
也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。 怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上  overflow:auto; zoom:1; 即可 overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。
为什么html浮动高度不一样,css浮动导致的高度塌陷问题及清楚浮动的方法
weixin_30531707的博客
06-18 410
浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。下面就从一开接触前端时，渐渐发现解决高度塌陷的问题的方式。 一、给友，记基开前不接些前家我告对猿果水使钮控浮动元素的父级元素添加固定的高度css【height:朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随200px】很多时候就是不想把如下布局中的父极元素的高度定死，讲究的是自适应，...
浮动高度丢失及其解决方法
m0_50657441的博客
11-19 691
浮动元素： 按照流水排列：寻找能最小放下的位置，浮动会半脱离文档流，遮住其他未浮动元素的结构,但不会遮住内容 元素都设置浮动，会造成父元素高度丢失 解决办法： 1：让父级浮动起来，但是会让父级脱离文档流 2: 给父级添加 onerflow:hidden 但是不友好 3：給父元素设置display:inline-block 类似文本效果 BFC方案： 1：在浮动元素后添加空白块，clear:both 2:给父元素添加伪类：设置clear:both 3:给父元素添加position，relative或
【CSS】子元素跟父元素的高度一致
热门推荐
向着光芒的女孩
09-27 3万+
绝对定位方法：（1）将父元素设置为绝对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent { /*关键代码*/ position: relative; /*其他样式*/ width: 800px; color: #fff; font-family: "Microsoft Yahei"; text-align: center;
css如何让父元素的高度由子元素撑开
05-25
可以使用以下两种方法让父元素的高度由子元素撑开： 1. 使用浮动（float）属性：将子元素设置为浮动，然后在父元素中添加一个clearfix类，清除浮动。这样父元素的高度就会被子元素撑开。 ```html <style> .clearfix:after { content: ""; display: table; clear: both; } .child { float: left; width: 50%; } </style> <div class="parent clearfix"> <div class="child"></div> <div class="child"></div> </div> ``` 2. 使用 display 属性为 flex 或 table 的父元素：将父元素的 display 属性设置为 flex 或 table，使其具有自适应高度的特性，从而让子元素撑开父元素。 ```html <style> .parent { display: flex; flex-wrap: wrap; } .child { width: 50%; } </style> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值