텍스트 블록을 액체 레이아웃의 이미지 행과 동일한 폭으로 만드는 방법은 무엇입니까?

Question

나는 한 블록의 텍스트, 즉 갤러리의 이력서를 가지고 있습니다.

갤러리는 액체 레이아웃을 가지고 있습니다. 즉, 화면 너비에 따라 x 그림에 4 장의 사진, 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> 

Answer 1

- 당신의 코드에 몇 가지 추가 변경됩니다.

나는 코드의 일부를 변경했고, JQuery와 기능을 추가 - 그것은 작동합니다 내가해야 할 일을했을

http://pastebin.com/t8GxmWu9

주요 변화가 스팬으로 목록을 변경하는 것입니다 - 그렇지 않으면 폭은 할 수 없습니다 ...

어쩌면 이것에 대한 해결 방법있다 ... 감지,하지만 난 이것에 대한 즉각적인 대답이없는

는 도움이되기를 바랍니다.

Answer 2

를 사용하여 자바 스크립트! 이미지 컨테이너 너비를 가져 와서 텍스트 컨테이너로 설정합니다. 대안으로 텍스트 정렬을 설정합니다 : 그것은 더 좋은 어쩌면

jQuery를 예를 볼 것이다 ... 정당화 :

당신은 자바 스크립트가 필요합니다 @ggzone에 의해 표시된 바와 같이

var containerwidth = $('#image-container').width(); 
$('#text-container').width(containerwidth);