水平对齐具有不同尺寸的 div答案

【问题标题】：Aligning divs with different dimensions horizontally水平对齐具有不同尺寸的 div
【发布时间】：2010-05-23 05:53:19
【问题描述】：

我有一个不同字体大小的标签云。

<div>
    <a style="font-size:15px;">tag1</a>
    <a style="font-size:10px;">tag1</a>
</div>

它看起来像这样：

alt text http://img69.imageshack.us/img69/5120/49274398.gif

现在我需要将每个标签包装到自己的 div 中：

    <style>
        .cloud {float:left}
        .tag {float:left}
    </style>
    <div class="cloud">
        <div class="tag"><a style="font-size:15px;">tag1</a></div>
        <div class="tag"><a style="font-size:10px;">tag1</a></div>
    </div>

这让他们到处都是。如何使它们看起来像第一张图片？

alt text http://img26.imageshack.us/img26/7355/12644278.gif

更新：如果我为.tag 设置固定高度，它的外观如下： alt text http://img710.imageshack.us/img710/3385/59552565.gif

【问题讨论】：

如果你真的需要，只需使用'a'元素作为你的容器。不要浮动，不要使用块元素（div 等）。必要时使用vertical-alignn (w3.org/TR/CSS21/visudet.html#propdef-vertical-align)。

标签： css alignment

【解决方案1】：

替换

.tag {float:left}

通过

.tag {display: inline}

或者还有其他什么原因导致您浮动所有标签？

【讨论】：

【解决方案2】：

也许增加较小字体大小的行高或垂直填充。发生这种情况的原因是因为较小的元素按照规范中的设计环绕较大的元素，因此通过增加较小元素的区域大小，应该防止环绕。

顺便说一句，首先是否需要浮动标签？在您的第一个示例中将它们全部排成一排似乎具有相同的效果。

【讨论】：

如果我删除浮动，每行将有 1 个标签。
哦，好吧，当然——我的错。在这种情况下，请尝试为 .tag div 设置一个固定高度，这应该使所有内容均等化。
我把截图固定高度。它看起来更好，但仍然需要一些东西。
嗯，是的 - 这有点尴尬。将每个 href 包装在 div 中是否有特殊原因？采取不同的方法可能更容易。