如何讓文本塊與液體佈局中的圖像行具有相同的寬度？

我有一段文字，那就是畫廊的簡歷。如何讓文本塊與液體佈局中的圖像行具有相同的寬度？

畫廊有一個液體佈局，也就是說，你可以看到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>

來源

2011-11-28 netadictos

正如@ggzone你需要使用Javascript表示 - 和你的代碼一些額外的變化。

我做了一些修改你的代碼，並增加了一個jQuery函數 - 和它的作品：

http://pastebin.com/t8GxmWu9

重大變化，我不得不做的是改變列表爲跨度 - 否則寬度不能被檢測...

也許有解決類似的問題，但我沒有這種直接的答案...

希望它能幫助。

來源

2011-11-28 15:07:45 ptriek

這工作，非常感謝（thx too，ggzone）。你可以用列表來做到這一點。我唯一看到的是ul和li必須顯示：inline，並且li不能有float：left被測量。我嘗試過使用jQuery解決方案，但我沒有意識到列表的問題。 – netadictos

使用JavaScript！獲取圖像容器寬度並將其設置爲文本容器。備選地，設置文本對齊：證明......它會看起來更好，也許

jQuery的例子：

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

來源

2011-11-28 14:56:49 ggzone

如何讓文本塊與液體佈局中的圖像行具有相同的寬度？

回答

相關問題