3

我已经画了一个草图，所以我更容易解释这个问题：（ 来源：mielai.lt）草图

所以，正如你所理解的，三个彩色矩形是 div，红色矩形是容器，绿色 div 有徽标和其他东西，蓝色 div 有缩略图，包裹在 li 标签中。所有 div 都在自动宽度上。缩略图是浮动的，所以屏幕越宽，动态的一排缩略图就越多，但右侧总是有剩余空间，因为它太窄，无法再多一个拇指到达那里。

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

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

这些有可能做到吗？如果是，请说明方法或举例。

我自己尝试过各种事情，包括各种示例（仅让某些内部 div 控制外部 div 的宽度），但它们对我不起作用。

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

4

4 回答 4

3

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

float:left;

到外部 DIV；

于 2013-11-28T11:31:17.010 回答
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 是缩略图的宽度。
如果有不清楚的地方，请询问/评论。

于 2012-08-22T07:15:56.360 回答
0

试试这个小提琴

Step 1：计算thumb box的实际宽度即width + 2*(border + margin + padding)

第 2 步：连续计算拇指的数量（这是您必须考虑的地方）我所做的是我检查了每个拇指的顶部 请参阅 Function 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;
}​
于 2012-08-22T09:00:20.717 回答
0

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

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

于 2012-08-22T09:23:41.110 回答