Question

我正在尝试创建一个类似于面板的结构。这是我尝试过的： FIDDLE

<div id='main'>
   <div id='firstp'>Panel 1</div>
   <div id='secondp'>Panel 2
      <div id='slide'>Panel 3</div>
   </div>
</div>

和CSS是

#main{
   width: 300px;
   height: 300px;
   border: 1px solid black;
}
#firstp{
   width: 20%;
   height: 100%;
   border: 1px solid blue;
   display: inline-block;
}
#secondp{
   width: 20%;
   height: 100%;
   border: 1px solid red;
   display: inline-block;
   position: relative;
   background-color: red;
}
#slide{
   width: 100%;
   height: 100%;
   position: absolute;
   border: 1px solid green;
   background-color: green;
}

我很想知道浏览器在解析时如何呈现HTML。我们可以看到有三个小组，Panel 3是Panel 2的小孩，位于Panel 2之上。然而，根据要求，Panel 2应位于Panel 3之上，并且当我点击面板2中的某个按钮时，面板3应该在面板2后面滑动并在面板2的右侧向前移动。希望我清楚了。请帮忙。

Answer 1

这不是关于浏览器渲染，而是让你的孩子超过父母身高的CSS。

因为您已经修复了父级的高度，但是您已经说#main的高度为100％，但还有另一个#slide的子级，它是文本节点{{1 }}。从技术上讲，#secondp的高度为Panel 2，因此溢出。

要解决此问题，请将文本节点#secondp放在元素中，然后设置该元素的高度（我使用了10％），然后将100% + height of Panel 2的高度调整为{{ 1}}。

以下是一个例子：

Fiddle

HTML：

Panel 2

CSS：

#slide

您还会注意到我已将100% - specified height of the new element添加到<div id='main'> <div id='firstp'>Panel 1</div> <div id='secondp'> <div id="slide1">Panel 2</div> <div id='slide'>Panel 3</div> </div> </div>，否则它会被排除在最前面。

另外，我添加了#main{ width: 300px; height: 300px; border: 1px solid black; } #firstp{ width: 20%; height: 100%; border: 1px solid blue; display: inline-block; vertical-align: top; box-sizing: border-box; } #secondp{ width: 20%; height: 100%; border: 1px solid red; display: inline-block; position: relative; background-color: red; box-sizing: border-box; } #slide{ width: 100%; height: 90%; position: relative; border: 1px solid green; background-color: green; box-sizing: border-box; } #slide1 { height: 10%; }以防止边框与父级重叠。

Answer 2

如果您希望面板2位于面板3的顶部，则需要应用z-index:-1;之类的内容。

我修改了您的fiddle以显示此功能。

按照您的要求，面板3位于面板2后面，单击按钮会将面板向右移动。您可以轻松地将其整理到隐藏整个面板并执行一些很酷的jQuery内容以使幻灯片转换更好。

试着记住，除非你另有说法，否则孩子通常会出现在父母面前。

Answer 3

#main{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
#main>div{
    width: 20%;
    height: 100%;
    border: 1px solid blue;
    display: inline-block;
}
#main>div{
    width: 20%;
    height: 100%;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    background-color: red;
}
#slide{
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid green;
    background-color: green;
}

浏览器如何呈现HTML

3 个答案: