Question

我有这段代码：

HTML：

<div>
    <h1>long string </h1>
    <div class="button">
        <a>button1</a>
        <a>button2</a>
        <a>buttonX</a>
    </div>
</div>

的CSS：

h1 {
    float:left;
    vertical-align:top;
}
.button {
    float:right;
}

.button a {
    display:inline-block;
    width:100px;
    background-color:red;
    vertical-align:top;
    margin:5px;
}

这里有一个jsFiddle：http://jsfiddle.net/a88rB/1/

为了简单起见，我只保留了最小标签。

目前，两者（带有“按钮”的h1和div）都在一行上。但是如果h1因为一个真正的长字符串就像

<h1>long string long string long string long string long string long string long string long string long string long string </h1>

http://jsfiddle.net/a88rB/2/

按钮按下h1。

我并不总是知道我将拥有的按钮数量。

有没有办法将div.button的宽度设置为它的内容，并将h1的宽度设置为父级的其余部分，这样如果h1足够长，它将进行文本换行并保留按钮顶部？

PS。我不需要支持ie7

Answer 1

Fiddle!您可以重新排列html，以便按钮位于顶部：

<div>
    <div class="button">
        <a>button1</a>
        <a>button2</a>
        <a>buttonX</a>
    </div>
    <h1>long string long string long string long string long string long string long string long string long string long string </h1>
</div>

如果您希望<h1>保持在顶部，从相同的“行”开始，请删除h1 { float:left; }规则。

Css根据下一个元素强制文本换行

1 个答案: