Question

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

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

查看标题，当标题有长文本时，标题位于浮动div下。我希望标题中断，然后显示2行（或更多）并保留在浮动div的左侧，而不是在它下面。

找不到任何帮助，谢谢！

编辑：我更新了jsfiddle：http://jsfiddle.net/Tu2GU/13/（删除了浮动div的％宽度）

我不希望并排有2个div，右边的浮动div就在那里，就像在页面内部给出链接的页面摘要一样。

此外，标题位于浮动div（在html代码中）未结束。

Answer 1

由于右侧列表使用百分比宽度，因此您可以设置宽度为百分比的max-width

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

Demo

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

如果设置了右浮动div的宽度，请使用calc(100% - 440px)或左侧水平填充+右侧宽度

Answer 2

使用以下CSS创建float: left;容器：

.lfloat {
    float: left;
    width: 75%;
 }

您只需将文字换成新的div：

<div class="lfloat">
    <!-- content -->
</div>

<强> Demo

这将包含左侧的内容并将侧边栏保持在右侧。

注意：您必须使用clear: both;清除浮动广告。

Answer 3

为什么不尝试浮动左边的元素而不是使用内联块？

* {
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    font-size: 1em;
}
.rfloat {
    float: right;
    width: 25%;
    background: #9C3;
    color: #111;
}
h1 {
    float: left;
    margin: 0;
    padding: 10px 5%;
    background: #06C;
    color: #FFF;
}
h2 {
    float: left;
    margin: 0;
    padding: 10px 5%;
    background: #F33;
    color: #FFF;
    width:65%;
}

http://jsfiddle.net/g4Grv/

Answer 4

更新了你的Jsfiddle：http://jsfiddle.net/Tu2GU/12/ 主要是在div和display:inline-block旁边的h1和p标签周围vertical-align:top换行这是你需要的吗？

Answer 5

您有几个选择。您可以将标题浮动到左侧以使其向上滑动 - 但您必须设置宽度。

h2 { 
    float: left; 
    width: 80%;
}

另一种选择是设置最大宽度。由于内联块元素在技术上是块级别，因此您可以提供宽度而不会破坏任何内容。你可以试试这个：

h2 {
    max-width: 80%
}

另一种选择是使元素内联。这将让浏览器确定最适合标题。

h2 {
    display: inline;
}

这将使标题环绕列表，您可以获得所需的结果。此方法会使height和width参数无效，因此您必须替换line-height和padding

的参数

内联块在浮动div下

5 个答案: