css - 处理css html div 垂直和水平对齐

Question

我有这个布局：

<div id="container">
<div id="left">LEFT</div>
<div id="mtop">MIDTOP</div>
<div id="mbotton">MIDBOT</div>
<div id="right">RIGHT</div>
<div id="botton">BOTTON</div>
</div> 

#container {
    height:200px;
    width:300px;
    vertical-align:middle;
    display:table-cell;
    background-color:yellow;
}
#left {
    height:100px;
    color:white;
    background-color:blue;
    font-size:20px;
    width:100px;
}
#right {
    height:100px;
    color:white;
    background-color:red;
    font-size:20px;
    width:100px;
}
#botton {
    height:20px;
    display: block;
    vertical-align: botton color:white;
    background-color:green;
    font-size:20px;
    width:100%;
}
#mtop {
    height:50px;
    color:white;
    background-color:orange;
    font-size:20px;
    width:100px;
}
#mbotton {
    height:50px;
    color:white;
    background-color:pink;
    font-size:20px;
    width:100px;
}
#left, #right {
        display: inline-block;
        vertical-align: middle
    }
#mtop, #mbotton {
        display: inline-block;
        vertical-align: top
}

现场演示 jsFiddle

但我需要这个布局

布局

谢谢你帮助我。

Answer 1

将您的中间 div 包裹在父 div 中，并给出左、中和右 div float: left，以便它们彼此相邻显示。

中间 div 的 CSS：

#middle {
  width: 100px;
  float: left;
}

见演示。

Answer 2

当您将 div 移到#rightdiv 上方时#mtop，您只需要一个float: left用于#leftdiv 和一个float: right用于#rightdiv

HTML：

<div id="container">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
    <div id="mtop">MIDTOP</div>
    <div id="mbotton">MIDBOT</div>
    <div id="botton">BOTTON</div>
</div>

CSS：

#left {
    float: left;
}
#right {
    float: right;
}

您还应该删除所有这些vertical-aligns 并更改

#container {
    height:200px;
    width:300px;
    vertical-align:bottom;
    display:table-cell;
    background-color:yellow;
}

然后所有divs 将整齐地对齐在#container.

修改后的 JSFiddle

Answer 3

您应该创建一个<div>以同时包含MIDTOP和MIDBOT

更好的是，完全避免使用 Container<div>并使用<table>0 px 边框。