如何让文本块与液体布局中的图像行具有相同的宽度？

我有一段文字，那就是画廊的简历。如何让文本块与液体布局中的图像行具有相同的宽度？

画廊有一个液体布局，也就是说，你可以看到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

如何让文本块与液体布局中的图像行具有相同的宽度？

回答

相关问题