css-float - 内联 block 在 float div 下

Question

我正在尝试使用 display:inline-block; 设置我的标题样式，但我对该属性的行为有疑问。

Jsfiddle:http://jsfiddle.net/Tu2GU/

查看标题，当标题文本很长时，标题位于 float 的 div 下方。我希望标题中断，然后显示 2 行(或更多行)并保持在 float div 的左侧，而不是在其下方。

找不到任何帮助，谢谢!

---

编辑:我更新了 jsfiddle:http://jsfiddle.net/Tu2GU/13/ (删除了 float div 的 % 宽度)

我不想并排放置 2 个 div，右侧的 float div 应该就在那里，就像页面摘要在页面内提供链接一样。

此外，标题位于 float div 下方(在 html 代码中)未结束。

Answer 1

由于右侧列表使用百分比宽度，您可以设置一个具有百分比宽度的 max-width

h2 {
    ... Your original CSS ...
    max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}

Demo

我建议使用一个类来应用于每个标题，而不是在每个 h1、h2 等上使用相同的最大宽度，但这只是个人偏好

如果设置了右侧 float div 的宽度，则使用 calc(100% - 440px) 或任何左侧水平填充 + 右侧宽度是