html - 带有侧边栏和内容的主容器

Question

拜托，我需要一些帮助。 2 天我无法解决这个基本任务。我是网页设计的新手，可能这很简单，但我就是不明白，为什么当我使用 align:left/right 或 position:absolute 用于子 div – main div 只是 disapaer ... 我想放在一边栏在左边，下面是标签，右边是主要内容。当我做错时，请给我一些建议？

这是一个示例:

<div id="main_container">

     <aside id="aside1">
        <ul>...</ul>
     </aside>

     <div class="tabs">
        <img src="images/tab1.png"/>
     </div>

     <div id="container">
       <p>...</p>
     </div>
</div>

还有 CSS:

#main_container {
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 2px 5px 0px #606060;
    -moz-box-shadow: 1px 2px 5px 0px #606060;
    -webkit-box-shadow: 1px 2px 5px 0px #606060;
    position: relative;

}

#aside1 {
    margin: 10px 10px;
    background: #c0c0c0;
    width: 250px;
}


#container {
    width: 680px;   
}

.tabs {

}

我知道我的 Css 还没有完成，但我只是不知道我应该做什么或使用什么..定位、 float 、显示...

我很感激任何建议!

Answer 1

position: absolute 从文档流中取出一个元素。因此，就该容器而言，该子元素不再存在(至少在某种意义上它不需要为其布局保留空间)。

因此，如果一个容器的所有子元素都定位为 absolute，那么该容器就没有需要预留的空间，就会崩溃。

一种解决方案是为容器指定高度，例如 #container { height: 100vh; } 这会将容器的高度设置为视口(viewport)高度的 100%。

另一个解决方案是使用类似 flexbox model 的东西.