子div出现在父div之外

我试图复制天蓝色的门户设计布局。我面临的挑战是，一旦我处于某个组件的内部（在图像示例“虚拟机”中），我需要能够在其中创建一个新组件，但让它的样式显示为新的面板在主面板集合中。有任何想法吗？我在下面提供了一个模板笔。子div出现在父div之外

Codepen Link

<section id="panel-container"> 
    <div class="panel" style="border:1px solid red;"></div> 
    <div class="panel" style="border:1px solid red;"> 
    <div class="sub-panel" style="border:4px solid cyan;"></div> 
    </div> 
</section>

来源

2017-05-05 Nick

除非有人可以提供一个替代的解决方案，这个表破解是我能拿出最好的。 Codepen Link

<table> 
    <tr> 
    <td>Panel</td> 
    <td>Panel 
     <td style="width: 600px;background:red;">Sub Panel</td> 
     <td>Sub Sub Panel</td> 
    </td> 
    <td>Panel</td> 
    </tr> 
</table>

CSS

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

td { 
    min-width: 300px; 
    height:100vh; 
    padding: 15px; 
    vertical-align: top; 
    border: 1px solid black; 
}

来源

2017-05-05 20:19:32 Nick

你可以使用flexbox混合和position

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

 
body { 
 
    margin: 0 
 
} 
 

 
#panel-container { 
 
    overflow-x: hidden; 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    flex: 0 450px; 
 
    height: 100vh; 
 
    display: flex; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 

 
.sub-panel { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 450px; 
 
    width: 450px; 
 
    height: 100vh; 
 
    border: 4px solid cyan; 
 
}

<section id="panel-container"> 
 
    <div class="panel"></div> 
 
    <div class="panel"> 
 
    <div class="sub-panel"></div> 
 
    </div> 
 
</section>

来源

2017-05-05 15:23:05 dippas

我复制你的代码到一个新的笔，它似乎并没有被生产所需的输出。我错过了什么吗？子面板应位于其父面板旁边。我意识到我形象中的箭头可能令人困惑，我只是试图说明它在其父面板内。 https://codepen.io/nickmuth/pen/rmGqBo – Nick

我很困惑你想达到什么目的。你真的想要你的“子面板”？在第二个“面板”里面，还是在第二个面板旁边，就像是第三个“面板”？ – dippas

看到上面编辑的评论 – Nick

你应该使用display: inline-flex而不是display: inline-block。

#panel-container { 
 
    overflow: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
} 
 

 
.panel { 
 
    position: relative; 
 
    display: inline-flex; 
 
    width: 250px; 
 
    height: 100vh; 
 
} 
 

 
.sub-panel { 
 
    width: 250px; 
 
    height: 100vh; 
 
}

<section id="panel-container"> 
 
    <div class="panel" style="border:1px solid red;"></div> 
 
    <div class="panel" style="border:1px solid red;"> 
 
    <div class="sub-panel" style="border:4px solid cyan;"></div> 
 
    </div> 
 
</section>

来源

2017-05-05 15:24:05 Pengyy

查看上面的评论 – Nick

子div出现在父div之外

回答

相关问题