Question

我有这些div。

enter image description here

html如下。

<div id="full-size">
    <div id="left-content">

    </div>
    <div id="center-content">

    </div>
    <div id="right-content">

    </div>
</div>

四个div的CSS：

#full-size{
    height:100%;
    width:100%;
    overflow:auto;
    top:5px;
    position:relative; 
    padding: 1px 220px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:table;
    table-layout:fixed;

    background-color:#F00;
}
#left-content {
    width:190px;
    border:1px solid #000;
    overflow:auto;
    padding: 5px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         
    background-color:#222;  
    margin-left: -200px;
    float:left;
    border:1px solid #000;
    display:table-cell;
}
#center-content {
    height:100%;
    width: 100%;
    border:1px solid #000;
    overflow:auto;  
    display:inline-block;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;       
    background-color:#222;
    padding:5px;
    display:table-cell;    
}
#right-content {
    width:190px;
    border:1px solid #000;
    overflow:auto;
    float:right;
    padding: 5px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    background-color:#222;
    margin-right: -200px;
    display:table-cell;
    background-color:#222;
    position: absolute; /*newly added*/
    right: 220px; /*newly added*/
    top: 5px;/*newly added*/
}

每件事情都像我想要的那样响应。左边和右边的div有大小和位置，中心div必须始终适应边框div之间的宽度。

我无法弄清楚，为什么左边的div总是停留在底部，我需要它总是在正确的顶部。

这是我的问题，让左边的div保持在最顶层。我不太了解css，但这些是我设法在Firefox，Chrome和IE中使用的。在所有这些中，布局都是一样的。

正如我所说，我不太了解css，我唯一想要的是这种布局适用于大多数浏览器。如果需要，我不介意把它扔掉。我只需要一些工作。

更新：

看起来如果隔离这些工作就好了，所以这里有所有的东西，错误正在发生。

http://jsfiddle.net/wr0r8msu/1/

这只发生在Firefox，IE和Chrome正在运行！

感谢您提前提供任何帮助。

Answer 1

使用position：relative;而不是位置：绝对;当使用浮动时，也许这将解决您的问题; - ）

Answer 2

我稍微修改了你的CSS。

 #full-size{
    height:100%;
    width:100%;
    overflow:auto;
    top:5px;

    padding: 1px 220px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:table;
    table-layout:fixed;

    background-color:#F00;
}
#left-content {
    width:190px;
    border:1px solid #000;
    overflow:auto;
    padding: 5px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         
    background-color:#222;  
    margin-left: -200px;
    float:left;
    border:1px solid #000;
    display:table-cell;
}
#center-content {
    height:100%;
    width: 100%;
    border:1px solid #000;

    display:inline-block;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;       
    background-color:#222;
    padding:5px;
    display:table-cell;    
}
#right-content {
    width:190px;
    border:1px solid #000;

    float:right;
    padding: 5px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    background-color:#222;
    margin-right: -200px;
    display:table-cell;
    background-color:#222;


}

没有固定或相对定位的div，它确实有效。

如何让左侧div与顶部对齐？

2 个答案: