1

我创建了一个 jsFiddle 来帮助解释：http: //jsfiddle.net/windthorst/BvgZK/

但这里是 HTML，供参考：

<header>
    <div id="titlebar">
        <div id="titlename">
            <h1>Title Name Here</h1>
        </div>
        <div id="titlemenu">
            <span>Item One</span><span>Item two</span>
        </div>
    </div>
</header>

我知道通过将 CSS 标记添加float: left到两个内部 div（#titlename 和 #titlemenu），我可以让它们在包含的 div（#titlebar）中正确并排排列。花了一点时间才弄明白，但这已经完成了。

我想知道的是：为什么他们在没有浮动的情况下以他们在 jsFiddle 中的方式定位？当第一个 div 中没有文本（在<h1>此处删除标签）时，第二个 div 的位置使得其中的<span>文本“停留”在包含 div 的底部（#titlebar），并且当它们中的任何一个都没有文本时两个位置都“正确”（据我估计）在包含的 div 中。

很抱歉打扰“为什么”，但如果我不知道这里到底发生了什么，我完全不知道如何避免在未来与这些问题作斗争......

4

2 回答 2

4

它vertical-align是控制内联格式上下文中元素对齐的属性 -<div>添加文本时向下移动的原因是因为默认值为内联格式上下文vertical-align中的baseline元素，这基本上意味着元素将调整它的垂直位置基于周围内联级元素中文本的基线（例如“标题名称此处”的基线）。您可以将默认值更改为例如，使其与周围内联级元素的顶部对齐，这更直观一些。您可能会受益于查看这个先前的答案以更好地解释topbaseline价值 - 一开始可能有点难以理解

http://jsfiddle.net/BvgZK/1/

于 2013-08-19T14:45:29.147 回答
1

默认情况下，两个内联块中的文本沿文本的公共基线垂直对齐。

如果你申请vertical-align: top，#titlename你可能会得到更好的结果。

见：http: //jsfiddle.net/audetwebdesign/BvgZK/2/

于 2013-08-19T14:46:32.760 回答