0

私はこのコードを持っています:

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) は 1 行にあります。しかし、もし 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 の幅を親の残りの部分に設定する方法はありますか?

PS。ie7 のサポートは必要ありません

4

1 に答える 1

2

フィドル！ボタンが上部に留まるように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; }ルールを削除します。

于 2013-10-02T17:34:16.970 に答える