Css принудительно переносит текст в зависимости от следующего элемента

Question

Css принудительно переносит текст в зависимости от следующего элемента

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 с "кнопками") находятся на одной строке. Но если 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

Etienne 02 окт. 2013, в 19:55

Источник

Теги:

html

css

textwrapping

1 ответ

Ещё вопросы

dezman · Accepted Answer · 2013-10-02T16-20-00.000Z

Скрипки! Вы можете изменить свой 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; } h1 { float:left; }.

Обыграй меня! Это лучший способ справиться с этим.