Html 如何使左div与顶部对齐？

我有这些沙发

html如下所示

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

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

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

    </div>
</div>

每件事都是我想要的。左侧和右侧div的大小和位置已固定，中心div必须始终适应边框div之间的宽度

我不明白的是，这就是为什么左div总是在底部，我需要它像右div一样总是在顶部

这是我的问题，让左分区保持在顶部。我对css不太了解，但这些是我在Firefox、Chrome和IE中成功实现的，它们的布局都是一样的

正如我所说，我对css不太了解，我唯一希望的是这种布局能在大多数浏览器中使用。如果需要的话，我不介意把它全扔掉。我只需要一些有用的东西

更新：

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

这只发生在Firefox中，IE和Chrome正在工作

---

提前感谢您的帮助。

使用位置：相对；而不是位置：绝对；使用float时，可能会解决您的问题；-）

我稍微修改了你的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似乎与底部对齐。这里是一堆提供的代码是的，它在左边，我的错：P，fiddle示例在那里工作，但在这里不工作：Xok所以问题不应该在这里，必须是css的其余部分，我将把所有的代码都放在小提琴里，这显示了发生了什么-你的CSS中有一堆重复的属性。你想让这成为一个响应性设计吗？只要读一读这个问题每件事情都像我想要的那样响应。左侧和右侧div的大小和位置已调整，中间div必须始终适应边框div之间的宽度。

是的，这是桌面版。您的css将它们放在底部：（我刚刚运行了css，它对我有效：-（你在哪个浏览器中运行它？我在Firefox中运行，刚刚尝试了Chrome和IE，两者都在工作，假设你有一个这样的浏览器？我从右侧的内容分区中删除了绝对位置，它工作正常。我犯了一个错误，它不是右侧的，而是左侧的。如果我删除了de-position，它们都会进入底部。）

 #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;


}