лучший способ добиться эластичного макета в 3-х цветах с чистым CSS, совместимым с X-браузером - PullRequest
Новая
       20

лучший способ добиться эластичного макета в 3-х цветах с чистым CSS, совместимым с X-браузером

0 голосов
/ 06 февраля 2011

Я не уверен, что будет лучшим (кроссбраузерным) способом для реализации следующего с использованием CSS.

У меня есть div, ширина которого может изменяться динамически. Внутри этого div я хочу разместить еще один набор div, которые будут выступать в качестве индикаторов размера. Я хочу, чтобы они выглядели примерно так: 

 ________________________
|                        |   <= outside div
|<------- 500px -------->|
|________________________|

Полезная разметка, которую я ожидаю, полезна: 

<div class="resizablediv">

    <div class="size-indicator-wrap">
        <div class="leftarrow"></div>
        <div class="panesize">500px</div>
        <div class="rightarrow"></div>
    </div>

</div>

Теперь я хочу:

1). Размер должен быть центрирован внутри .resizablediv

2) ширина .panesize для соответствия его содержимому (как, например, float или inline)

3) .Левая стрелка должна быть выровнена влево и. Правая стрелка должна быть выровнена вправо

3) ширина каждой левой и правой стрелок занимает половину оставшегося пространства; Внутренняя ширина .resizablediv минус внешняя ширина .panesize

Для стрелок div я буду использовать фоновые изображения, чтобы показать стрелки

Я могу сделать это путем пересчета размера и установки всего, используя относительное и абсолютное позиционирование и т. Д. Но я хотел бы использовать чистый CSS, если это возможно.

приветствуется любая подсказка о том, как этого добиться.

...