Html 为什么<;部门>;内部<;部门>;将主容器向下推

Html 为什么<;部门>;内部<;部门>;将主容器向下推,html,css,Html,Css,当试图将一个添加到另一个容器中时,会导致主容器被向下推,并与添加的相等。我可以通过将added的位置设置为absolute来解决这个问题,但我正在尝试了解是哪个属性导致了这种行为 例如,将红色的添加到紫色的中会导致紫色的被按下 HTML 在类c-content-text中删除display:inlineblock,也可以解决您的问题 我想这是你的问题 另外,内联块与字体大小和行高有关,您将body设置为0px,这使得许多问题难以描述。例如,尝试删除字体大小:0px;从身体上。无论您删除('in

当试图将一个
添加到另一个容器中时,会导致主容器被向下推,并与添加的
相等。我可以通过将added的位置设置为absolute来解决这个问题,但我正在尝试了解是哪个属性导致了这种行为

例如,将红色的
添加到紫色的
中会导致紫色的
被按下

HTML


在类
c-content-text
中删除
display:inlineblock
,也可以解决您的问题

我想这是你的问题

另外,内联块与字体大小和行高有关,您将body设置为0px,这使得许多问题难以描述。例如,尝试删除字体大小:0px;从身体上。无论您删除('inline'还是添加absolute),行为都是一样的。尽管这一页看起来仍然不好


最后,我建议您尝试布局设计,您的场景应易于使用网格布局实现。

删除
显示:类
c-content-text
中的内联块
也应解决您的问题

我想这是你的问题

另外,内联块与字体大小和行高有关,您将body设置为0px,这使得许多问题难以描述。例如,尝试删除字体大小:0px;从身体上。无论您删除('inline'还是添加absolute),行为都是一样的。尽管这一页看起来仍然不好


最后,我建议您尝试布局设计,您的场景应该很容易通过网格布局实现。

请编辑您的图像链接我不认为我可以在我的帖子中嵌入图像,希望这样可以。请编辑您的图像链接我不认为我可以在我的帖子中嵌入图像,希望没问题,谢谢你的帮助。我试图简化布局,以了解内联块元素是如何导致移位的,为什么这里的内联块元素不会导致相同的问题?我现在不能给你解释,希望有人能给你一个详细的解释,已经投票支持你的问题,顺便说一句,我认为它与字体大小有一定的关系,你将正文改写为0px;谢谢你的帮助。我试图简化布局,以了解内联块元素是如何导致移位的,为什么这里的内联块元素不会导致相同的问题?我现在不能给你解释,希望有人能给你一个详细的解释,已经投票支持你的问题,顺便说一句,我认为它与字体大小有一定的关系,你将正文改写为0px;
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Blue</title>
</head>

<body>

    <aside class="side-menu"></aside>
    <main class="main-content">
        <div class="c-content">
            <div class="c-content-text">

            </div>

        </div>


        <div class="r-content">
            <div class="r-content-text">

            </div>
        </div>
        <div class="video-container"></div>
    </main>



</body>

</html>
html {
  font-family: Roboto, san serif;
  font-size: 16px;
  font-weight: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  font-size: 3.125rem;
  line-height: 3.6875rem;
  text-transform: uppercase;
  color: #ffffff;
}

p {
  font-size: 1rem;
  font-family: Roboto;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
}

body {
  background-color: #1458e4;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.side-menu {
  width: 5%;
  height: 100vh;
  /* background-color: coral; */
  position: sticky;
  display: inline-block;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.main-content {
  background-color: cyan;
  display: inline-block;
  width: 95%;
}

.c-content {
  background-color: rgb(184, 11, 184);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  width: 67%;
  height: 100vh;
}

.r-content {
  display: inline-block;
  background-color: darkkhaki;
  width: 33%;
  height: 100vh;
  padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}

.video-container {
  background-color: lemonchiffon;
  height: 68vh;
}

.c-content-text {
  display: inline-block;
  /* position: absolute; */
  background-color: tomato;
  width: 500px;
  height: 500px;
}

.r-content-text {
  background-color: turquoise;
  width: 500px;
  height: 500px;
}```