为什么<div>中的<div>会将主容器下推
<div>中的<div>会将主容器下推的原因是因为<div>元素是一个块级元素，它会在页面中创建一个独立的块，并且默认情况下会占据父容器的全部宽度。当<div>元素嵌套在另一个<div>元素中时，内部的<div>元素会被视为子块，它会在父块中创建一个新的块级上下文。
这种行为导致内部<div>元素的高度会影响外部<div>元素的布局，从而将主容器下推。如果内部<div>元素的高度超过了外部<div>元素的高度，那么外部<div>元素会自动扩展以适应内部内容的高度。
这种布局行为在一些情况下可能会导致页面的布局出现问题。为了避免这种情况，可以使用CSS的布局技术来控制<div>元素的行为，例如使用浮动、定位或者弹性布局等方式来改变<div>元素的定位和尺寸。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云原生数据库TDSQL：https://cloud.tencent.com/product/tdsql
- 腾讯云云数据库MongoDB：https://cloud.tencent.com/product/cmongodb
相关·内容
1回答
为什么<div>中的<div>会将主容器下推
html、css
当尝试在另一个容器中添加<div>时，会导致主容器被下推，并与添加的<div>相等。我可以通过将添加的位置设置为绝对来解决此问题，但我正在尝试了解是哪个属性导致了此行为。https://imgur.com/t9Q0ocm 例如，将红色<div>添加到紫色<div>内会导致紫色<div>被<em
浏览 12提问于2020-11-22得票数 1
1回答
父页边距中的最后一个元素是否未生效？
html、css
为什么最后一个元素的边距不起作用？.container {}
margin-bottom: 3em margin-bottom: 5em<div class</p>
浏览 0提问于2019-04-30得票数 0
1回答
调整容器div内部div的上边距会将内部div和容器div从正文向下推。
css、html、margin
我觉得这一定是我做了什么傻事的问题，但我想不通。height: 45px; }</head> <divid='container'> <p>logotext.</p>
浏览 0提问于2011-12-16得票数 21
回答已采纳
3回答
HTML DIVS随内容动态扩展？
html、css
我有主体的主要‘容器’div，在这个‘容器’div里面有三个div，分别是'header'，' content‘和'footer’我的问题是，我希望'content‘div随着内容的动态增加而垂直扩展，并且当'content’div扩展时，'footer‘将被下推。所有这些都是在主“容器”<em
浏览 1提问于2011-01-17得票数 1
回答已采纳
1回答
jQuery设置容器和页脚高度
jquery、height、twitter-bootstrap、containers、footer
我正在使用$(".container").height($(document).height());设置我的容器100% height，但是我想知道有没有一种方法可以调整上面的行，使它将我的footer
浏览 3提问于2012-06-13得票数 1
回答已采纳
1回答
使动态兄弟姐妹的父级填充高度
html、image、css、responsive-design
我有一个html结构，有一个容器和两个子容器。第一个子级是一个动态大小的映像，第二个是一个也是动态大小的div。
如果两个孩子比主元素的总高度高，则主元素应该展开以适应这两个div，而页脚应该向下推。
浏览 0提问于2018-01-16得票数 2
回答已采纳
7回答
为什么会有身体的边缘而不是容器的边缘？
html、css
我很难弄清楚为什么在导航元素上设置的边距是从主体向下推的，而不是从父元素容器向下推的。在下面的代码中，我有一个灰色的背景和白色的容器。当我在导航中应用上页边距时，白色容器被向下推，而不是我的导航。width: 600px; height: 100%;nav{
margin
浏览 1提问于2016-10-22得票数 1
2回答
按下div中的内容。
html、css
我在我的(WP)站点上有一个两列的解决方案，两个使它在缩小应用的浏览器宽度时工作。
除了主容器中的内容被向下推外，它工作得很好。如果我浮动:左两个容器，而不是这样，但我需要这样的解决方案，以使正确的容器填充宽度。我尝试将正确的容器设置为position:relative，并将右边容器中的标题(
浏览 3提问于2014-03-25得票数 0
2回答
为什么div离开主div容器？
html、css、css-float
在学习教程的同时，我想到了一些实验。为什么底部的<div>**s超出主** <div>**?**有类似的问题，像这个，但它有点复杂的初学者。</p>
</div<
浏览 0提问于2020-03-21得票数 1
回答已采纳
1回答
Div没有它漂浮的孩子的总高度高。
html、css、css-float、containers
为了将它保持在屏幕的中心位置，我使用了以下代码： <div align="left" style="width:750px; border-style:double;"> </div>主750 px宽容器中的
浏览 0提问于2013-04-03得票数 3
1回答
将溢出但仅在三条边上约束的元素的绝对布局
javascript、css、html
我需要验证一个布局，其中div是滚动容器，绝对位于三个边(左，右和底部)，但动态大小与上面的兄弟容器。滚动容器和同级都在固定维度容器中。我做了一个jsfiddle来演示我的问题。如果您按照这里的单击说明操作，您将看到，当您在单击第二个容器之后单击顶部容器时，它会调整大小，这在理想情况下会将div.myscroll的顶部向下推。这不会发生，因为<e
浏览 0提问于2012-05-11得票数 3
1回答
使用位置创建div :绝对向下推div
css、wordpress
我正在尝试制作一个带有背景的页面，使其缩放到浏览器的宽度，无论页面的高度是否大于浏览器的宽度，然后将内容放在背景下。我已经用背景实现了这一点，但我必须使用绝对定位才能工作，所以我很难弄清楚如何向下推主容器。因此，一种方法是这样做，或者让背景跟随浏览器的宽度，而不使用绝对定位。#supersized {
浏览 1提问于2014-03-09得票数 1
回答已采纳
2回答
理解显示:表格单元格；功能
css、css-tables
请注意，我并不是想解决任何特定的问题，，而是试图理解是什么导致了这个问题。1)为什么当height设置在表行中时，它会向下推文本，但是当height被移除时，它会将文本放在顶部？
2)为什么宽度/高度设置不受尊重？3)为什么设置margin属性对它们也没有任何影响？
浏览 1提问于2012-02-25得票数 22
7回答
绝对位置div不推倒其他内容
html、css
我在jsFiddle中的大部分代码是：
<div class="huge-title centered">
<
浏览 13提问于2014-06-02得票数 16
回答已采纳
2回答
子div被推倒在主div中。
html、css
基本上，我想要创建一个主容器。主容器内部包含一个子容器，该子容器将向右浮动。但是每当我试图包含一些文本时，子容器就会被“向下推”。为什么是这样，我如何解决呢？ width: 250px; margin: 10px; background-color: #000000;<divMorbi comod sed dolor si
浏览 2提问于2016-07-02得票数 0
回答已采纳
1回答
如何使用jquery创建类似sevenly.org的设计
javascript、jquery、html、css、user-interface
我有基本的javascript和jquery的知识。我想实现像这样的设计，就像一个页面/目录被移动到另一个页面上，但我不知道如何开始。如果有人对如何实现这一点有想法，请让我知道。
浏览 0提问于2012-03-20得票数 0
回答已采纳
2回答
flex容器中的DIV下推整行
css、flexbox
我正在开发一个使用指令的angular/js应用程序，这个特定的flex容器使用div(指令)，它可能包含一个或多个项。当一个指令包含3个项目时，如果它不能完美地适合该指令中的所有项目，那么它就会将整个行压下，而不是把第一行放在第一行，而把其余的放在第二行。相反，它会在顶部留下一个空格，并将所有3个推到第二行。在这种情况下使用指令的原因是为了重用和将公共功能分组在一起。
为了简单起见，这演示了我在使用div
浏览 32提问于2019-07-19得票数 2
回答已采纳
2回答
是什么让下拉菜单位于其他元素之上？
jquery、html、css
无论如何，我已经花了大约3个小时检查HTML和CSS (我通常不会编写它们)，并且不知道需要调整什么才能让其他元素滑下而不是停留在原来的位置。我应该寻找什么？我不明白是什么让他们走出了DOM的流程。他们有一个Z-index，但将它设置为一个较低的值并不会产生任何影响。
浏览 1提问于2014-02-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
