Question

我有一个文本块，即图库的简历。

画廊有一个流畅的布局，可以说，你可以看到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>

Answer 1

使用javascript！获取图像容器宽度并将其设置为文本容器。或者设置text-align：justify ...它看起来会更好

jQuery示例：

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

Answer 2

如@ggzone所示，您需要使用Javascript - 以及对代码进行一些额外更改。

我对你的代码做了一些修改，并添加了一个jQuery函数 - 它可以工作：

http://pastebin.com/t8GxmWu9

我必须做的主要改变是将列表更改为跨度 - 否则无法检测到宽度...

也许这有一个解决方法，但我没有立即回答...

希望它有所帮助。

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

2 个答案: