我需要向父div添加一个像素

Question

我有一个"教室"的div,其中包含每个"学生"的div.每个"student"div包含一个图像.这是HTML:

<div class="classroom">
    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg">
    </div>
</div>

我想在一行中显示所有"学生"div,所以我使用以下css:

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}

.classroom {
    position: relative;
    height: 100%;
}

.classroom .student {
    position: relative;
    height: 100%;
    float: left;
}

.classroom .student .student-image {
    height: 100%;
}

为了让学生在"课堂"div中有足够的位置,我使用jQuery来计算"教室"的宽度:

$(document).ready(function() {
    var w = 0;
    $(".student").each(function() {
        w += $(this).width();
    });
    $(".classroom").width(w);
});

不幸的是结果不是我的预期.最后一个"学生"div将下到下一行(好像没有float: left;分配).更奇怪的是,当在1个像素中增加"Classroom"div的宽度时,div返回到第一行末尾的位置.
我做了那些jsfiddles:这里http://jsfiddle.net/U3gBG你可以看到问题.单击结果面板并使用箭头键向下和向右滚动.
在这里http://jsfiddle.net/U3gBG/1/您可以看到计算后将"教室"div的宽度加1的结果("教室"的宽度等于"学生"宽度加1的总和像素).这个结果就是我的需要.
我不明白为什么我需要将父div的宽度增加1？为什么总和所有子div的宽度是不够的？

Answer 1

因此，根据 Eyal 的评论，我对这个问题的根源感到好奇。在我的系统上，我注意到 Chrome 已换行，但 IE 和 FF 没有。经过更多挖掘后，我发现环绕是由于渲染的屏幕区域造成的。

\n\n

您正在使用 jQuery 调整父级的大小，但是当除以三时，您将进行四舍五入。在某些情况下，向下舍入会导致容器对于图像而言太窄，并且第三次换行。如果四舍五入，则有足够的空间并且不会发生包裹。

\n\n

我在下面发布的解决方案是一个更可靠的答案，因为它会在浏览器调整大小时自动重新计算。您必须不断运行 js 并监视调整大小事件才能使用 JS 处理此问题。希望有帮助。

\n\n\n\n

除了使用 javascript 之外，你可以使用 CSS 来代替吗？

\n\n

设置。student​ display:inline然后设置parent为white-space:nowrap. 他们不会包裹。接下来，您必须处理图像之间的空白。因为我们现在将它们设置为inlinehtml 中的任何空格都会导致间隙。因此，如果您在图像容器上设置“font-size：0px”，则会缩小间隙。如果容器需要包含文本，请记住将字体设置回正值。不需要搞乱js。

\n\n

http://jsfiddle.net/U3gBG/8/

\n\n

body {\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n}\n\nhtml, body {\n    height: 100%;\n}\n\n\n.classroom {\n    white-space: nowrap;\n    height: 100%;\n    font-size: 0px;\n}\n\n.classroom .student {\n    height: 100%;\n    display: inline;\n}\n\n.classroom .student .student-image {\n    height: 100%;\n}\xe2\x80\x8b\n

\n