如何使文本块与液体布局中的图像行具有相同的宽度？
我有一段文字，那就是一家画廊的简历。
图库采用流动布局，也就是说，您可以看到 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>
I have one block of text, that is the resume of a gallery.
The gallery has a liquid layout, that's to say, you can see 4 pictures to x pictures, let's say, 8 pictures, depending on the screen width.
My client want the block of text to be exactly the width of this layout, but as you will supponse, the images change their row independently from the block of text.
Can you see a solution? Here is the code, you can change it more or less if it fits well, important restriction it must be a liquid design:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 JavaScript！获取图像容器的宽度并将其设置为文本容器。或者设置 text-align: justify ...它看起来会更好也许
jQuery 示例：
Use javascript! Get the image-containers width and set it to the text-container. alternatively set text-align: justify ... it will look nicer maybe
jQuery example:
正如 @ggzone 所指出的，您将需要 Javascript - 以及对代码的一些额外更改。
我对您的代码做了一些更改，并添加了一个 jQuery 函数 - 它可以工作：
http://pastebin.com/t8GxmWu9
我必须做的主要改变是将列表更改为跨度 - 否则无法检测到宽度...
也许有一个解决方法，但我没有立即回答这个问题...
希望它有帮助。
As indicated by @ggzone you'll need Javascript - and some extra changes to your code.
I made some changes to your code, and added a jQuery function - and it works:
http://pastebin.com/t8GxmWu9
Major change I had to do is to change the list into spans - otherwise width can't be detected...
Maybe there's a workaround for this, but I don't have immediate answer for this...
Hope it helps.