我有三個div我想在同一行顯示。三者中的每一個都有不同的寬度和高度,並且它們不是直的文本。我想左對齊一個(一直到左邊),右對齊另一個(一直到右邊),然後居中第三個(在包含div的中間,在這種情況下的整個頁面)。左,中間和右對齊同一行底部的div div
此外,我想三個div垂直對齊到包含div的底部。我將它們垂直對齊到包含div的頂部。
處理這個問題的最佳方法是什麼?
我有三個div我想在同一行顯示。三者中的每一個都有不同的寬度和高度,並且它們不是直的文本。我想左對齊一個(一直到左邊),右對齊另一個(一直到右邊),然後居中第三個(在包含div的中間,在這種情況下的整個頁面)。左,中間和右對齊同一行底部的div div
此外,我想三個div垂直對齊到包含div的底部。我將它們垂直對齊到包含div的頂部。
處理這個問題的最佳方法是什麼?
通過您的div容器設置爲position:relative
和孩子的div來position:absolute
你可以將div放在容器的範圍內。
這很容易,因爲您可以使用bottom:0px
將所有垂直對齊容器的底部,然後使用左/右造型沿水平軸進行定位。
我成立了一個工作的jsfiddle:http://jsfiddle.net/Damien_at_SF/KM7sQ/5/,代碼如下:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
注:對於 「中心」 的div,保證金-left = div的寬度的一半:)
希望幫助:)
設置position: relative
上包含分區,設置position: relative
您3個的div,並設置3周的div的bottom
屬性0
:
bottom: 0
爲了讓您的中心div的彈性,你可以這樣做:
<div style="display:table; width:500px;">
<div style="display:table-row;">
<div style="display:table-cell; width:50px;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell; width:50px;"></div>
</div>
</div>
我的技術類似於@達-AT-SF:
我試圖嚴格證明你問的所有要求對於。
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
#container {
position: relative;
height: 400px;
width: 80%;
min-width: 400px;
margin: 0 auto;
background: #ccc
}
#left, #right, #mid {
position: absolute;
bottom: 0;
}
#left {
left: 0;
width: 80px;
height: 200px;
background: red
}
#right {
right: 0;
width: 120px;
height: 170px;
background: blue
}
#mid {
left:50%;
margin-left: -80px;
width: 160px;
height: 300px;
background: #f39
}
進一步增強了第一個答案:
在 「中心」 DIV + CSS,你需要添加:
text-align:center;
在 「正確」 的DIV + CSS,你需要添加:
text-align:right;
...完美實現左/ /右對齊。
+1,如果只是因爲你發佈了與我「相同的想法」,但速度更快。 – thirtydot 2011-02-16 00:28:31