Question

拜托，我需要一些帮助。 2天我无法解决这个基本任务。我是网页设计的新手，可能这很容易，但我无法理解，为什么当我使用对齐：左/右或位置：绝对的孩子divs - 主要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没有完成，但我只是混淆了我应该做什么或使用..位置，浮动，显示......

我赞美任何建议！

Answer 1

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

因此，如果容器的所有子元素都定位为absolute，那么该容器没有空间需要保留并折叠。

一种解决方案是给容器一个定义的高度，例如#container { height: 100vh; }，它将容器的高度设置为视口高度的100％。

另一种解决方案是使用像flexbox model。

这样的东西

Answer 2

浮动/绝对定位的容器从＆＃34; flow＆＃34;一份文件。这意味着他们周围的任何容器都不再认为它们存在，父容器不会扩展以适应它们。如果您正在使用浮点数，解决此问题的方法是将元素放在使用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>

Answer 3

例如以其他方式使用CSS

#main_container {
    width: 500px;

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

Answer 4

首先你必须修改结构：

<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。必须使用display：inline;

定义div

麦克

带有Aside栏和内容的主要容器

4 个答案: