Как сделать так, чтобы блок текста имел такую ​​же ширину, как строки изображений в жидком макете? - PullRequest
Новая
       46

Как сделать так, чтобы блок текста имел такую ​​же ширину, как строки изображений в жидком макете?

0 голосов
/ 28 ноября 2011

У меня есть один блок текста, который представляет собой резюме галереи.

Галерея имеет ликвидный макет, то есть вы можете видеть от 4 до x картинок, скажем, 8 картинок,в зависимости от ширины экрана.

Мой клиент хочет, чтобы текстовый блок точно соответствовал ширине этого макета, но, как вы понимаете, изображения меняют свой ряд независимо от блока текста.

Можете ли вы увидеть решение?Вот код, вы можете изменить его более или менее, если он подходит, важное ограничение, это должно быть жидкое оформление: 

 <div class="descrip">

                                    <span>lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
                                </div>


                                <ul class="galeria">
    <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>
  <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>
  <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>

    </ul>

Ответы [ 2 ]

1 голос
/ 28 ноября 2011

Используйте JavaScript!Получите ширину контейнера изображений и установите его в текстовом контейнере.в качестве альтернативы установите text-align: justify ... это будет выглядеть лучше

jQuery пример: 

var containerwidth = $('#image-container').width();
$('#text-container').width(containerwidth);
0 голосов
/ 28 ноября 2011

Как указано @ggzone, вам понадобится Javascript - и некоторые дополнительные изменения в вашем коде.

Я внес некоторые изменения в ваш код и добавил функцию jQuery - и она работает:

http://pastebin.com/t8GxmWu9

Главное изменение, которое мне пришлось сделать, - это изменить список на промежутки - иначе ширина не может быть обнаружена ...

Возможно, для этого есть обходной путь, но янет немедленного ответа на это ...

Надеюсь, это поможет.

...