Html 带侧栏和内容物的主容器

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

以下是一个示例：

<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还没有完成，但我只是困惑我应该做什么或使用。。位置，浮动，显示

---

我感谢你的建议

位置：绝对

从文档流中提取元素。因此，就容器而言，子元素不再存在（至少在某种意义上，它不需要为其布局保留空间）

因此，如果一个容器的所有子元素都定位为

绝对值

，那么该容器就没有需要保留的空间，并且会折叠

一种解决方案是给容器一个定义的高度，例如

#container{height:100vh；}

，它将容器的高度设置为视口高度的100%

---

另一种解决方案是使用类似于。

的位置：绝对

从文档流中提取元素。因此，就容器而言，子元素不再存在（至少在某种意义上，它不需要为其布局保留空间）

因此，如果一个容器的所有子元素都定位为

绝对值

，那么该容器就没有需要保留的空间，并且会折叠

一种解决方案是给容器一个定义的高度，例如

#container{height:100vh；}

，它将容器的高度设置为视口高度的100%

---

另一种解决方案是使用类似的方法。

首先必须修改结构：

<div id="main_container">
 <div id="main">
    <aside id="aside1">
       <ul>...</ul>
    </aside>
    <div id="container">
      <p>...</p>
    </div>
 </div>
 <div id="bottom">
    <div class="tabs">
       <img src="images/tab1.png"/>
    </div>
 </div>

…

然后是css。div必须使用display:inline定义

---

Mike

首先，您必须修改结构：

<div id="main_container">
 <div id="main">
    <aside id="aside1">
       <ul>...</ul>
    </aside>
    <div id="container">
      <p>...</p>
    </div>
 </div>
 <div id="bottom">
    <div class="tabs">
       <img src="images/tab1.png"/>
    </div>
 </div>

…

然后是css。div必须使用display:inline定义

---

Mike

浮动/绝对定位的容器从文档的“流”中移除。这意味着它们周围的任何容器都不再认为它们存在，父容器也不会扩展以适应它们。如果您使用浮动，解决此问题的方法是在浮动元素下面放置一个元素，该元素使用

clear:both

，如下所示：

<div id="main_container">

     <aside id="aside1" style="float: left">
        <ul>...</ul>
     </aside>

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

     <div id="container">
       <p>...</p>
     </div>
     <div style="clear: both"></div>
</div>

…

浮动/绝对定位的容器从文档的“流”中移除。这意味着它们周围的任何容器都不再认为它们存在，父容器也不会扩展以适应它们。如果您使用浮动，解决此问题的方法是在浮动元素下面放置一个元素，该元素使用

clear:both

，如下所示：

<div id="main_container">

     <aside id="aside1" style="float: left">
        <ul>...</ul>
     </aside>

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

     <div id="container">
       <p>...</p>
     </div>
     <div style="clear: both"></div>
</div>

…

例如，以另一种方式使用CSS

#main_container {
    width: 500px;

}
#main {
    display:table;
}
#aside1 {
    display:table-cell;
    width: 40%;
    background-color:#faf;
}
#container {
    display: table-cell;
    background-color:#555;
}

---

例如，以另一种方式使用CSS

#main_container {
    width: 500px;

}
#main {
    display:table;
}
#aside1 {
    display:table-cell;
    width: 40%;
    background-color:#faf;
}
#container {
    display: table-cell;
    background-color:#555;
}

---

div#aside1和#container必须用“display:inline”定义，我这样做了，aside1的背景消失了。另一件事是，容器的宽度也损失了。可能没问题，但我做错了。使用display:inline block没问题。。刚才滴在容器底部，我需要在顶部。#main#u容器{宽度：500px；}#main{display:table；}#aside1{display:table cell；宽度：40%；背景色：#faf；}#容器{display:table cell；背景色：#555；}试试我写的css——每个div都显示出来——例如div#aside1和#container必须用“display:inline”定义，我这样做了，aside1的背景消失了。另一件事是，容器的宽度也损失了。可能没问题，但我做错了。使用display:inline block没问题。。刚才滴在容器底部，我需要在顶部。#main#u容器{宽度：500px；}#main{display:table；}#aside1{display:table cell；宽度：40%；背景色：#faf；}#容器{display:table cell；背景色：#555；}尝试我编写的css-显示每个div-示例检查我的JSFIDLE检查我的JSFIDLE