Div的CSS垂直對齊

Question

我有一個標題，然后在下面顯示彼此相鄰的項目選擇。 在選擇項目的同一行上，我顯示一張圖片。

我遇到的問題是我希望將單個圖像（X）對齊，以使其底部與所選項目（A，B和C）的底部對齊。 例如。

H1 Title             ----------
                     |        |
                     |        |
                     |    X   |
-----  -----  -----  |        |
| A |  | B |  | C |  |        |
-----  -----  -----  ----------

我遇到的問題是它看起來像這樣：

H1 Title

-----  -----  -----  ----------
| A |  | B |  | C |  |        |
-----  -----  -----  |        |
                     |    X   |
                     |        |
                     |        |
                     ----------

這是使用的HTML Im：

<h1>H1 Title</h1>

<div id="items">
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</div>

<div id="single_image">
        <img src="myImage.png" />
</div>

我正在使用的CSS是：

#items { 
    float:left; 
}

#items ul { 
    list-style:none; margin:0; padding:0; 
}

#items ul li { 
    display:inline; float:left; 
    margin-bottom:20px; font-size:22px; 
}

#single_image { }

#single_image img { 
    float:right; height:130px; 
    width:inherit; margin-right:40px; 
}

有人可以幫我嗎？ 我無法解決這個問題。 我嘗試在CSS中的img上使用vertical align屬性，但是似乎沒有任何區別。

Answer 1

如果圖像是固定大小，則快速解決此問題的方法是簡單地使用負的頁邊距頂部，以便圖像位於其自身上方的高度-因此底部實際上是頂部所在的位置。

例如，如果圖像高度為130px，請執行以下操作：

#single_image img { margin-top: -130px; }

Answer 2

一種可能的解決方案是將它們包裝在容器中，並將#items絕對定位在容器的底部。 這是一個示例：

http://jsfiddle.net/5csWH/

<div class="container">
    <h1>H1 Title</h1>
    <div id="items">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
    <div id="single_image">
        <img src="myImage.png" />
    </div>
    <div class="clearfix"></div>
</div>

CSS：

#items          { float:left; }
#items ul       { list-style:none; margin:0; padding:0; position: absolute; bottom: 0; }
#items ul li    { float:left; margin-right:20px; font-size:22px; width: 50px; background: #DDD; }

#single_image       { }
#single_image img   { float:right; height:130px; width:inherit; background: #DDD; }

.container { width: 50%; margin: 0 auto; background: #EEE; position: relative; }
.clearfix { clear: both; }​