div的CSS垂直对齐答案

【问题标题】：CSS Vertical Alignment of Divdiv的CSS垂直对齐
【发布时间】：2012-12-19 04:35:33
【问题描述】：

我有一个标题，然后在其下方显示一个相邻的项目选择。在选择项目的同一行上，我显示了一张图片。

我遇到的问题是我希望单个图像 (X) 对齐，以便它的底部与项目选择 (A、B 和 C) 的底部一致。例如。

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

我遇到的问题是它看起来像这样：

H1 Title

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

这是我使用的 HTML：

<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 上使用垂直对齐属性，但似乎没有任何区别。

【问题讨论】：

为此添加一个 jsfiddle。

标签： css html image

【解决方案1】：

如果图像是固定大小的，快速解决这个问题的方法是使用负边距顶部，这样图像就在上面自己的高度 - 所以底部实际上是现在顶部的位置。

例如如果图像高度为 130px，请执行以下操作：

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

【讨论】：

我在这里删除了页脚。如果您想说明您的 Twitter 帐户是什么，请将其放在您的个人资料中。有一些脚本可以抓取 SO 个人资料并以这种方式将 Twitter 帐户与它们关联起来，因此它是人们找到你的一种比答案更有效的方法。

【解决方案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; }

【讨论】：