[英]Deal with css html div align vertically and horizontally
我有這樣的布局:
<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
}
但我需要這種布局
謝謝你幫我
將您的中間div包裹在父div中,並使左,中和右div float: left
以便彼此相鄰顯示。
中級div的CSS:
#middle {
width: 100px;
float: left;
}
參見DEMO 。
當您移動#right
上述DIV #mtop
格,那么你只需要一個float: left
為#left
DIV和float: right
的#right
DIV
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
您應該創建一個<div>
以同時包含MIDTOP
和MIDBOT
更好的是,完全避免使用Container <div>
並使用邊框為0 px的<table>
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.