Question

我做了一个草图，所以我更容易解释这个问题： sketch http://www.mielai.lt/sketch.png

所以，正如你所知，三个彩色矩形是div，红色矩形是容器，绿色div有徽标和其他东西，蓝色div有缩略图包裹在li标签中。所有div都在自动宽度上。缩略图是浮动的，因此屏幕越宽，动态连续缩略图越多，但右侧总是留有空间，因为它太窄而不能再用拇指到达那里。

我希望蓝色div的宽度接近拇指末端，蓝色虚线所在的位置，它应该动态变化。

第二件事是绿色div，理想情况下我希望它匹配蓝色div的widt，它以虚线结束，所以绿色div中的东西不会超出整个外观。

这些可能吗？如果是，请解释如何，或举例说明。

我自己尝试了各种各样的事情，包括各种例子（Only let certain inner divs control outer div's width），但它们对我不起作用。

如果有任何帮助，我将不胜感激。提前谢谢！

Answer 1

我用以下方法解决了这种情况：

float:left;

到外面的DIV;

Answer 2

据我所知，你必须使用JavaScript来做到这一点（或者至少在JavaScript中很容易）。以jQuery为例，您可以执行以下操作：

$(window).resize(function(){
    var original_blue_width = $("#red").width() - 2*3;
    var blue_width = original_blue_width - (original_blue_width % (10+5));
    $("#blue").width (blue_width);
    $("#green").width (blue_width);
});

其中3是红色和蓝色框之间的填充，5是缩略图之间的填充，10是缩略图的宽度。
如果不清楚，请询问/评论。

Answer 3

试试这个fiddle

第1步：计算拇指框的实际宽度，即宽度+ 2 *（边框+边距+填充）

第2步：计算连续拇指（这是你必须考虑的地方）我做的是我检查了每个拇指的顶部见功能 calculate_in1Row（）

HTML：

<div class="red">
    <div class="green">Logo</div>
    <div class="blue">
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
    </div>
</div>

CSS：

.red {border:1px solid red; }
.green{border:1px solid green; margin:2px;}
.blue{border:1px solid blue; margin:2px; overflow:auto;}
.thumb {border:1px solid black; width:40px; height:40px; margin:2px; padding:3px;  float:left}

jQuery的：

$(document).ready(function() {
    var tw = $(".thumb").width() + 2 * (1 + 2 + 3); // width + 2*(border+margin + padding)
    tw = tw * calculate_in1Row()
    $(".blue").width(tw);
    $(".green").width(tw);
});

// function ti calculate no of thumb box in single row
function calculate_in1Row() {
    var in1Row = 0;
    $('.blue .thumb').each(function() {
        if ($(this).prev().length > 0) {
            if ($(this).position().top != $(this).prev().position().top) return false;
            in1Row++;
        }
        else {
            in1Row++;
        }
    });

    return in1Row;
}

Answer 4

由于问题未标记为javascript / jquery，因此CSS解决方案可以如下所示：

我要说的是你可以创建一个围绕绿色和蓝色框的外部div。给这个外部div赋予宽度并让它设置属性margin:0 auto;这将适合从左右两侧相等空间包围的所有小黑框。

外部div匹配内部div的宽度

4 个答案: