css - 如何让两个 div 标签与 CSS 水平对齐？

Question

如何让两个 div 标签与 CSS 水平对齐？

我有两个 div 标签。一个包含文本，一个包含图像。它们并排放置，我希望第一个 div 中的文本与图像底部对齐。图片位于文字右侧。

或者应该是这样。当我使用各种 CSS 选项时，事情开始四处跳跃。

Answer 1

如果我没看错你的情况，你会遇到这样的情况:

<div id="some_text">
     This is some text.
</div>
<div id="some_image">
   <img src="some_img.png" />
</div>

并且您希望第一个 div 中的文本从第二个 div 中图像的底部开始，例如:

                             |-------------------|
                             |                   |
                             |     Some Image    |
                             |                   |
                             |                   |
                             |-------------------|
            Some Text

因为这两个 div 是相互独立的，所以没有默认的方法来实现这一点。要尝试的一件事是设置两个 div 的宽度，将图像 div 向右浮动，然后使用 clear 属性确保第二个 div 在第一个 div 之下，例如:

#some_image {
     width: 50%;
     float: right;
 }

#some_text {
    width: 50%;
    clear: right;
}

不确定这是否会完美运行，但请尝试一下。