Вёрстка хитрой конструкции
Хочется сверстать вот такую конструкцию:
фотография
текст
По сути, это для просмотра фотографий — показывается главный кадр, а под ним по центру подпись и две стрелочки — назад и вперёд, расположенные соответсвенно слева и справа, ровно по краям кадра.
И в общем-то у меня уже был готовый вариант… Но тест в IE он не прошёл.
Главное условие — ширина фотографии не известна.
В FF всё прекрасно работало засчёт display:table. В IE, ясное дело, такого нет. Ставлю width:100% для любого из внутренних блоков — конструкция разежается на всю страницу, ставлю float:right просто у правой стрелки — то же самое.
Какие будут идеи?
Upd. В общем пересмотрел подход и решил сдвинуть стрелки к тексту, а не разносить по краям.)) В вопросе теперь чисто «спортивный интерес»
Upd2. Благодаря
name_is_gray Решение-таки нашлось.)
Css:
/* основной код, работает просто так в фоксе и опере */
.pic_frame { background: #999; text-align: center; width: auto; margin: 0 auto; float: left; }
.pic_title { background: #c90; padding: 0 60px; margin: 0; position: relative; }
.pic_title img { margin: 10px; }
.pic_title span { background: #a00; width: 50px; display: block; top: 0; position: absolute; }
.pic_title .left_arrow { left: 0; }
.pic_title .right_arrow { right: 0;}
/* в IE левый блок остаётся на месте, для него мини-хак */
* html .pic_title .left_arrow {left: -50%; margin-left: 30px;}
Html:
<div class='pic_frame'>
<img style='width: 500px; height: 100px' />
<p class='pic_title'>
<span class='left_arrow'>←</span>
Подпись
<span class='right_arrow'>→</span>
</p>
</div>
