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

#rightdiv をdiv の上に移動すると#mtop、必要なのfloat: leftは#leftdiv の afloat: rightと#rightdivの a だけです

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-align変更する必要があります

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

すべてdivの が の下部にきちんと整列し#containerます。

変更された JSFiddle

Answer 3

<div>と の両方を含むMIDTOPを作成する必要があります。MIDBOT

<div>さらに良いことに、コンテナを完全に避けて、<table>0 ピクセルの境界線を使用してください。