当div内所有元素都是浮动的时候，让容器(div)自适应高度

最新推荐文章于 2023-10-18 11:45:44 发布
最新推荐文章于 2023-10-18 11:45:44 发布
阅读量405 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43773218/article/details/127091255
版权

在一个div内的所有元素都是浮动的，此时div的高度是不会自适应的。

如图所示：div容器内的两个元素，图片列表和上传组件都是浮动的，因为图片是后端返回的(目前代码里是本地图片测试)，即无法确定有多少张图片，所以需要让div容器的高度自适应。

 解决办法：需要给父类标签添加overflow:auto;和zoom:1

 

效果:实现了容器高度的自适应

两行图片：

一行图片：

 

 

 

可狗可乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础笔记六，DIV盒子模型（content内容，内边距paddins，边框border，外边距margin）
qq_55006020的博客
06-28 1700
盒子模型分为四个区域内容，可以往里面安放的元素内边距padding（可以用像素填充，也可以用百分比，还可以指定上下左右的不同的款式），简写模式，1个值的情况下 就是上下左右 四个值是上右下左边框border边框的样式 有实线（solid），虚线（dashed），双实线（double），点线（dotted）border-width 指定边框的宽度边框可以设置圆角（border-rddius） 用百分比或者像素边框的不同方位 border-left/top/rigth/bottom。
＜div＞ | HTML元素容器标签
weixin_44111587的博客
06-04 2290
定义与用法 <div>标签定义 HTML 文档中的一个区块或者一部分。 <div>标签用来组合块级元素，经常与 CSS 一起使用，用来布局网页。。 <div>标签就像一个容器单元，用于封装其他页面元素，并将HTML文档分为几部分。 提示：默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符，我们您可以用 CSS 调整显示效果。 div标签和span标签的区别 div标签 跨度标签 HTML...
里面的div怎么撑开外面的div让高度自适应
09-22
希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应，下面有个示例大家可以参考下
day12-宽高自适应
user_lc的博客
10-29 66
高度塌陷
HTML容器标签之div【详细介绍】
最新发布
zy1992As的博客
10-18 2567
div>标签可以替代块级元素(如标签、标签等)，但是它们在语义上有一定的区别。例如，标签和标签的不同在于，标签具有特殊的含义，语义较重，代表着标题，而标签只是代表一个元素。标签可以容纳段落、标题、表格、图像等各种网页元素，即大多数HTML标签都可以嵌套在标签中;在上例中，第7~ll行代码使用4个标签对页面进行布局，其中，最外层的标签用于整体控制页面版式，里面嵌套的3个标签分别用于布局页面头部、内容和页脚。
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
09-25
然而，当我们在这样的结构中动态添加多个 `li` 元素时，如何让包含它们的 `div` 自动调整高度以适应所有 `li` 的内容呢？这是一个需要解决的关键问题。本文将探讨一种解决方案，并提供一个示例代码，以确保在添加更...
浮动的div自适应居中显示的js代码
12-09
在网页设计中，浮动元素（如`div`）经常用于创建布局，比如让内容左右排列。然而，当这些浮动的`div`需要在浏览器窗口大小改变时保持居中对齐，传统的浮动方法（如设置`left`或`right`属性）通常无法实现预期效果。...
设置DIV最小高度以及高度自适应随着内容的变化而变化
limeOracle的博客
10-17 480
<!--退租账单--> <div id="bilsli" onmouseover="showBill(this)"> #bilsli{ position:absolute; right:-300px; top:0px; background:#fff; bor...
echarts图表的div高度跟随数据长度自适应
JackieDYH的博客
12-04 1672
// 排名折线图 <template> <div id="charts"> <div id="cate" ref="cate" style="width:5rem;margin-top:.2rem;" ></div> <!-- height:9.2rem; --> <!-- 数据说明 --> <div class="dv"> <spa.
自适应（div自适应，和屏幕自适应高度）
qq_42384002的博客
03-05 5762
1. div自适应内容： 由于div里的内容常常会发生变化，总是修改高度很麻烦，如果是动态页面则更不可能每次都改高度，所以div必须要自适应内容高度。 技巧： div去掉height,增加padding-bottom即可。 2. 屏幕自适应高度：同div自适应高度一样，有时页面的内容或多或少，甚至没有，而页面存在底部footer,如果不自适应屏幕高度，内容过少，会导致footer跑到页面...
三种有效解决DIV高度自适应的方法
iteye_4805的博客
11-17 1054
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法，它们分别是一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。 DIV高度自适应的三种有效解决方法 DIV＋CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的，但有些小问题确实很棘手，例如令人头痛的“DIV高度自适应”问题。 现在有三种解决DIV高度自适应行之有效的办法，一是JS法、二是背景图填充法、三是“...
实现div盒子的高度随页面内容增多而变化（自适应高度）效果
热门推荐
weixin_46353030的博客
07-20 1万+
一、功能需求： 给三个div盒子，实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮，当点击show按钮后将被隐藏的内容显示出来，并令后一个div盒子向下移动适当距离。保持三个div盒子的布局。 二、实现核心 方法在于max-height属性、overflow属性和display:inline-block属性 三、具体实现： 对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性； 用js获取show按钮和处于中间
上下div高度动态自适应--另类处理方案
weixin_30588675的博客
08-27 142
这段时间在工作中遇到一个看似较为棘手的问题。问题描述：查询报表页面分为上下两部分，上部分为条件输入区域，下部分为报表展示区域。客户要求做到默认满屏（但要动态适应不同的窗体大小，也就是浏览器窗体用户会手动改变其大小），但上部分条件输入区域有动态变化高度的现象。 在遇到上述问题，您是否第一反应就是利用window的onresize事件，做尺寸的动态调整。但是条件输入区域某个按钮动...
div容器；浮动；做出百度；盒子模型
Niekii的博客
11-24 369
一、html常用标签 （1）a：跳转标签 （2）img：图片标签 （3）div：容器标签 行内：本身有多大，占据的网页位置就有多大a、img 块级：宽度一定占据网页的一整行，高度由内容自动撑大——容器 A、宽度一定占据网页端一整行，高度由内容自动撑大 B、用于页面分割（分割思路：将一个页面尽可能的切割，切割成你能够解决的最小单元格） 二、浮动 （1） （3）解决由于子元素全部设置浮动导致的页面紊乱问题 A、给父元素一个固定的高度 （4）文字环绕效果 三、盒子模型 概念：css假定
某个div子元素设置浮动，让父div任然有高度的方法
qq_36566924的博客
09-24 923
1.在该div下面加上伪类： .clear:after{ content: "."; height: 0; visibility: hidden; display: block; clear: both; } 2...
css中的div容器笔记
陈浩杰杰的博客
02-06 3471
盒子模型 padding-border-margin模型，也叫盒子模型。 padding:为内边距； border:边界； margin：外边界； 举个例子吧：
html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢
weixin_42467457的博客
06-15 299
用flex布局可以解决这个问题跟你一样的div结构，为了便于看清和区分，里面写了字母。样式里每个div都加了背景色。完整代码如下:Titlebody {margin: 0;}.contain {background: gray;height: 400px;display: flex;flex-direction: column;}.A {background: red;}.B {backgroun...
如何让div自适应高度
05-01
让div自适应高度可以使用以下方法： 1. 使用CSS flexbox布局。将父元素设置为display: flex，再将子元素的高度设置为auto。 2. 使用display: table属性。将父元素设置为display: table，再将子元素设置为display: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值