div 随着内容撑开

当内容不定高时，可以使用以下几种方式让 div 随着内容撑开：

使用 display: flex
将父元素设置为 display: flex，并使用 flex-direction: column 让子元素纵向排列。此时，子元素会沿着主轴向上排布，同时设置其 flex 属性为 1，让子元素随着内容自动撑开容器。
使用 display: grid
将父元素设置为 display: grid，使用 grid-template-rows: auto 让子元素按照内容自动撑开，而不是在网格中固定高度。
使用 min-height
将父元素的高度设置为 min-height，而不是固定高度。min-height 将自动适应子元素大小，使 div 高度能够随着内容自动扩展。
使用 overflow: hidden
将父元素设置为 overflow: hidden，内部子元素将以正常方式撑开，但是父元素将隐藏溢出的部分。
使用 table 和 table-cell
父元素设置为 display: table，子元素设置为 display: table-cell，父元素将会自动适应子元素的高度。同样也可以使用 vertical-align: top 让子元素和父元素对齐。

需要注意的是，以上解决方案可能在一些特殊情况下并不适用，需要结合具体的布局需求进行选择。

<div style="display: flex;"><div style="flex-grow: 1;">这是第一个 div 的内容。</div><div style="flex-grow: 1;">这是第二个 div 的内容。</div>
</div>

div 随着内容撑开相关推荐

让DIV内部内容撑开外层的div方法
1.今天遇到一个DIV设置的问题,因为外层的DIV(a)没有设置高度,想弄成自适应的,在外层DIV的下面添加的其他DIV(b)节点会因为DIV(a)没有设置高度而浮到上面去,跟DIV(a)的内容重叠在 ...
div设置一个最小高度和最大高度，但是中间可以靠内容撑开
div设置一个最小高度和最大高度,但是中间可以靠内容撑开,很简单,给div对应的css加两个代码: 1.min-height:100px;(内容不足100px时候,高度会有100px). 2.max- ...
html 单元格被撑开_表格单元格td设置宽度无效始终有内部的内容撑开
摘要:这篇HTML栏目下的"表格单元格td设置宽度无效始终有内部的内容撑开",介绍的技术点是"表格单元格.设置宽度.宽度无效.单元格.单元.设置",希望对大家开 ...
div中内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
div 中的控件底部对齐_如何将div的内容与底部对齐？
如何将div的内容与底部对齐? 假设我有以下CSS和HTML代码: #header { height: 150px; } Header title Header content (one or mul ...
html 内容不被父级包住,解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法...
问题父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法. 今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋! 问题图片问题描述最外层的不能自适应高 ...
uniapp swiper组件被内容撑开
文章目录 swiper组件被内容撑开 1.html结构 2.使用uni.createSelectorQuery()动态获取内容高度 swiper组件被内容撑开 1.html结构 <swiper ...
html使元素不被内容撑开,flex布局被子元素撑开，如何保持内容不超出容器
移动端里面,flex 布局很好用,它可以根据设备宽度来自动调整容器的宽度,可是最近在作项目的时候发现一个问题:html 一个li里面设置了flex,flex: 0 0 33.333%,而后想让子元素里 ...
jquery js 设置 div 的内容，给 div 添加一个属性
设置 div 的内容的写法: jquery 的写法: $( "#div1" ).html( "aa" ); // 将 div1 元素里面的 html ...

div 随着内容撑开

div 随着内容撑开相关推荐

最新文章

热门文章