Question

我创建了一个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”中“正确”（按我的估计）定位。

很抱歉打扰“为什么”，但如果我不知道这里究竟发生了什么，我会完全避免如何避免在将来遇到这些问题......

Answer 1

vertical-align属性控制内联格式化上下文中元素的对齐 - 以及<div>在添加文本时向下移动的原因是因为vertical-align的默认值为{对于inline formatting context中的元素{1}}，这基本上意味着元素将根据周围内联级元素中的文本基线（例如“Title Name Here”的基线）调整其垂直位置。例如，您可以将默认值更改为baseline，以使其自身与周围内联级元素的顶部对齐，这更加直观。您可以通过查看此previous answer以获得top值的更好解释而受益 - 最初可能有点难以理解

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

Answer 2

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

如果您将vertical-align: top应用于#titlename，您可能会获得更好的结果。

请参阅：http://jsfiddle.net/audetwebdesign/BvgZK/2/

将内联（-block）div并排包含内联内容时使用的规则是什么？

2 个答案: