如何让div增加高度，而不是先跳到左边浮动的div下面，然后再增加高度？
要让一个div增加高度，而不是先跳到左边浮动的div下面，然后再增加高度，可以使用以下方法：
- 使用clear属性：在需要增加高度的div后面添加一个空的div，并设置clear属性为left或both。例如：
<div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
<div style="clear: left;"></div>
<div style="height: 300px; background-color: blue;"></div>这样，第三个div会在第一个div的下方增加高度，而不会被第一个div的浮动影响。
- 使用overflow属性：将包含两个div的容器div设置overflow属性为auto或hidden。例如：
<div style="overflow: auto;">
<div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
<div style="height: 300px; background-color: blue;"></div>
</div>这样，容器div会自动包裹两个子div，并且第二个div会在第一个div的下方增加高度。
- 使用flex布局：将包含两个div的容器div设置display属性为flex，并使用flex-direction属性来控制子元素的排列方向。例如：
<div style="display: flex; flex-direction: column;">
<div style="float: left; width: 200px; height: 200px; background-color: red;"></div>
<div style="height: 300px; background-color: blue;"></div>
</div>这样，容器div会以垂直方向排列两个子div，并且第二个div会在第一个div的下方增加高度。
以上是三种常用的方法，根据具体情况选择适合的方法来实现div增加高度而不受浮动div影响。
相关·内容
我在一个容器中有两个内联的div，左边的应该是固定大小的，右边的应该使用剩余的宽度。如果右边包含的文本很少，它工作得很好，如果它包含更多的文本，我希望它在高度上扩展。发生的情况是，如果有太多的文本，右边的一个会跳到左边的下面，然后在高度上扩展。简而言之:我希望两个元素始终在同
浏览 31提问于2019-08-23得票数 1
回答已采纳
假设我有两个div，一个向左浮动，一个向右浮动，而右边浮动div有一个固定的高度。我希望左边浮动div中的内容填充右边浮动div下面的空间，如果高度增加到那个点。我不确定这是否是正确的方法，所以让我知道是否有更好的方法。一些搜索让<
浏览 2提问于2014-09-25得票数 0
回答已采纳
2回答
我很困惑，因为我认为这是一个非常简单的要求。有以下要素：
在div#B内部有大量的图像，浮动的左边和固定的宽度(和高度)。根据屏幕分辨率的不同，屏幕右侧(div</
浏览 4提问于2013-08-19得票数 0
回答已采纳
1回答
我试图让一个浮动的div有一个填充父div的高度。结构如下：| Middle child| Right child- float:right
问题是左边的孩子比右边的文本少，这意味着右边增加了父div的<em
浏览 0提问于2013-11-13得票数 0
因此，我的页面结构如下：……向左浮动的div left_menudiv页脚(在div main之外)。代码如下：<code>A0</code>但是当我在div内容中放入更多的内容时，这个div会增加它的高度，这正是我想
浏览 19提问于2018-12-14得票数 1
我有一些浮动的div元素，它们是向左浮动的。它们都有100%的高度。其中一个DIV超过了视窗的高度，另一个DIV的大小没有调整到父DIV的100%，而父DIV的位置是相对设置的(这就是它在我的选项中的工作方式)。除了显示表格、表格行、表格单
浏览 0提问于2011-02-07得票数 0
2回答
我有一个高度和宽度都设置为100%的.video div。但目前，.video div的高度“溢出”了包含它的.stream div (它似乎增加了.top div的高度)。为了澄清，我正在尝试让.video div“填充”.stream div，而不会有任何重叠/溢出。谢谢。删除<
浏览 2提问于2012-01-07得票数 0
我的问题是。如果类"Window“是一个div，它可以根据其中加载的内容增加高度，那么如何让id "loader”恰好浮动在div类"Window“的中间(居中的高度/宽度)？再次感谢。下面是代码。loader { width:32px;
position: relativ
浏览 0提问于2012-02-23得票数 1
我有两个在网页上可见的框，一个在左边浮动，另一个在右边浮动。我要这些箱子沿底部对齐。问题是，有一个框的高度会因不同的屏幕宽度而改变，因为它包含文本，并且当文本包装时，高度会增加。另一个框没有任何文本，可以是任意高度，但是它上面有文本，这将根据文本包装的大小改变框的y位置。
I希望通过更改不包含文本的框的高度来对
浏览 4提问于2014-08-19得票数 0
首先，我要说的是我对HTML和CSS非常陌生。到目前为止，我有一个包含两个div的div，一个浮动在左边，一个浮动在右边。右边浮动的那个包含一个400px图像，左边的一个应该包含一些文本，但我希望背景color的高度保持与图像相同的高度。因为图像是由百分比而不是像素高度定义<
浏览 0提问于2015-11-03得票数 0
1回答
我在height: fit-content有个div。当我向该div添加新的浮动文本节点时，div的高度按步骤增加，以适应其新内容的高度。如何将此高度变化动画化，类似于用transition: height 1s;进行硬编码的高度变化
如果我知道div 在之前的高度和在之后的</em
浏览 1提问于2018-09-15得票数 0
下面是一张图片：问题是我在一个容器div中有两个div。容器div的高度随着nessiscary的增加而扩展，两个内部div也是如此。右边的div有一个边框-左边..。但是如果它是空的，它不会填满整个高度。我该怎么做呢？
浏览 5提问于2012-04-19得票数 1
2回答
我很抱歉，我没有其他的方式来描述这件事，我试着找出如何让它停止的方法，让自己沮丧得流泪。黑色和灰色的div没有高度属性，因为我不想让它
浏览 3提问于2012-12-31得票数 1
1回答
我使用这个函数来匹配高度-但是当一列的高度增加时，我会遇到一个问题。我举个最简单的例子，“左栏”是一个旁注，“右栏”是一个表单。 form stuff here </div></html>
浏览 4提问于2012-02-22得票数 0
回答已采纳
3回答
我在一个特定的案例中有一个常见的问题...我尝试自动扩展浮动div的高度，以迫使它们接触到它们的父级的底部。
下面是一个例子：我的目标是让所有的浮动列都有相同的高度，并触及容器的底部。(因此，所有列的高度都必须是内容最多的列的高度)父列<e
浏览 2提问于2014-07-22得票数 0
1回答
自动设置网页高度
、、
所以我想根据内容来设置它们的高度。要做到这一点，我只是创建了一个外部div，其中我只给出了与容器相关的样式。如下所示{ margin-right:auto;}{
margin-top:0; height:80
浏览 2提问于2014-10-17得票数 0
回答已采纳
2回答
<div id="application_header"> <div><h5>tagline</h5></div>#application_header> div正在阻止应用#application_header背景属性，原因是：float:left？he
浏览 1提问于2014-05-25得票数 0
回答已采纳
我有一个容器div，左边有一个浮动的导航窗格，右边有一个内容窗格：<div id="container"> <div id="content&quo
浏览 0提问于2010-09-07得票数 2
3回答
在hover事件中，我想增加圆圈的高度和宽度，但是我想增加所有的像素，而不仅仅是在左边或右边。下面是示例：我如何处理这个问题？
浏览 2提问于2014-03-28得票数 0
回答已采纳
我在点击时附加了多个div，我需要包含元素缓慢地增加高度以适应新附加的div，而不是立即跳到它们的新高度。我一直在搜索堆栈溢出和web，但似乎找不到答案；至少我无法用我有限的jquery知识实现它。我认为最好的方法是在.fadein之前将附加的div的高度从0 0px动画到40 0px(或任何高度</e
浏览 3提问于2014-04-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
