防止文本扩大收缩包装的div [英] Prevent text from expanding shrink wrapped div

问题描述

我有一个支架div，它收缩包裹在其他几个div上，所以支架没有设定的宽度.持有人内部还有另一个包含文本的div.当文本过多时，它会扩展支架，因此不会再收缩包装了.这是我的问题的演示， http://jsfiddle.net/WSbAt/.这是用于相册页面的.

I have a holder div that's shrink wrapped around a couple other divs, so the holder doesn't have a set width. Also inside the holder is another div that contains text. When there's too much text it's expanding the holder so it's not shrink wrapped anymore. Here's a demo of my problem, http://jsfiddle.net/WSbAt/. This is for a photo gallery page.

我在想如果不设置支架的宽度就没有办法，因为每行的图像数是动态的，所以我不能这样做.我可能可以用jQuery弄清楚，但希望有CSS解决方案.

I'm thinking there might not be a way without setting the width of the holder, which I can't do since the number of images per row is dynamic. I can probably figure it out with jQuery, but was hoping there's a css solution.

我尝试不指定任何宽度，因为每行缩略图的数量取决于您的窗口大小.

I'm trying not to specify any widths since the number of thumbnails per row is based on your window size.

演示: http://jsfiddle.net/WSbAt/

CSS:

#container
{
    width:600px; /*only set for demo. will be random on live page*/
    border:1px solid black;
    text-align:center;
}
#holder
{
    display: inline-block;
    border:2px solid blue;
}
.thumbnail
{
    float:left;
    width:100px;
    height:100px;
    background-color:red;
    margin-right:10px;
    margin-bottom:10px;
}
.expandedHolder
{
    padding:10px;
    border:2px solid yellow;
    margin-bottom:10px;
    margin-right:10px;
}
.fullImage
{
    float:left;
    width:250px;/*only set for demo. will be random on live page*/
    height:200px;
    background-color:green;
}
.text
{
    float:left;
    margin-left:10px;
}

HTML:

<div id="container">
    <div id="holder">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div style="clear:both;"></div>
        <div class="expandedHolder">
            <div class="fullImage"></div>
            <div class="text">some text here. some text here. some text here. </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

推荐答案

我使用jQuery计算文字宽度.如果有人好奇，这就是您解决我的问题的方法.

I used jQuery to calculate what the text width should be. If anyone is curious, this is how you would fix my example.

var textDiv = $(".text");
textDiv.hide();//hide the text to get holder width without text

var holderWidth = $("#holder").width();
var imageWidth = $(".fullImage").width();
var textWidth = (holderWidth - imageWidth) - 45;

textDiv.css("width", textWidth + "px");
textDiv.show();

这篇关于防止文本扩大收缩包装的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！