7

我有一个“教室”的 div，其中包含每个“学生”的 div。每个“学生” 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;分配）。更奇怪的是，当“教室”div 的宽度增加 1 个像素时，div 会返回到第一行末尾的位置。
我做了那些 jsfiddles：在这里http://jsfiddle.net/U3gBG你可以看到问题。单击结果面板并使用箭头键向下和向右滚动。
这里http://jsfiddle.net/U3gBG/1/可以看到计算后“教室”div的宽度加1的结果（“教室”的宽度等于“学生”宽度的和加1像素）。这个结果是我需要的。
我不明白为什么我需要将父 div 的宽度增加 1？为什么总和所有子 div 的宽度还不够？

4

4 回答 4

0

当我在调试屏幕下的 IE9 中查看此内容时，我检查了您的 div 元素和图像元素，似乎第一个图像的宽度是 999.95 而不是整数，其他两个图像也都是非整数宽度值。

似乎有些浏览器会将这个数字四舍五入，而有些浏览器会将其向下舍入，因此您可以使用其他答案中建议的 css，也可以像您正在做的那样简单地添加 +1 像素，或者您可以使用 parseint( ) 函数或某种汇总函数，以确保您的图像在父 div 中有足够的空间。

编辑：

我认为问题源于的 css 值height: 100%，这意味着宽度是计算出来的，而不是固定到实际图像大小，因此宽度的非整数值（以像素为单位），所以为了继续使用这种放置图像的方法，你会在将父 div 的总宽度相加时必须使用math.ceil()或类似的东西。

于 2012-12-01T02:53:06.527 回答
0

将它们分成 3 个类，而不是让它们像你拥有它们那样通过链条。而不是拥有

.classroom {
    white-space: nowrap;
    height: 100%;
}

.classroom .student {
    height: 100%;
    display: inline-block;
    float: left;
}

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

让他们

.classroom {
    white-space: nowrap;
    height: 100%;
}

.student {
    height: 100%;
    display: inline-block;
    float: left;
}

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

所以你已经定义了每一个......现在就你遇到的问题而言，那是因为你在 CSS 中没有足够具体地说明你想要的东西，你现在已经设置了宽度或高度，你只有浮点数设置为 te student 元素，所以它很容易做奇怪的事情。尝试类似..

.classroom {
    width:308px;
    height:100px;
    float:left;
    margin-left:0px;
}

.student {
    height:100px;
    width:100px;
    margin-left:2px;
    float: left;
}

.student-image {
    height: 100px;
    width:100px;
    float:left;
}​

如果我给出的确切规格对你的照片来说足够大，我想知道，但只是为了向你展示你应该如何尝试对它们进行一些控制......并注意我给出的宽度规格。教室是 308 像素宽，然后学生是 100 像素宽，左边距为 2 像素，所以 3 个学生框架每个 100 像素宽，每个框架有 2 像素边距，总宽度为 306 像素，剩下 2 个像素给在最后一个学生框架的右边，所以这一切都加起来了.. 计算出你需要的宽度并考虑边距。希望这可以帮助... ：）

于 2012-12-01T06:21:38.743 回答
0

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

您正在使用 jQuery 调整父级的大小，但是当除以三时，您将得到四舍五入。在某些情况下，向下取整会导致容器对于图像和第三次环绕太窄。如果它四舍五入，那么你有足够的空间并且不会发生包装。

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

除了使用 javascript，您可以使用 CSS 代替吗？

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

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

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

html, body {
    height: 100%;
}


.classroom {
    white-space: nowrap;
    height: 100%;
    font-size: 0px;
}

.classroom .student {
    height: 100%;
    display: inline;
}

.classroom .student .student-image {
    height: 100%;
}​
于 2012-12-01T02:40:44.717 回答
-1

你可以用 ul li

    <ul style="float:left; List-style:none;">
<li><img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li>
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li>
 <li>   <img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li>
    </ul>

并修复您的图像大小

于 2012-12-01T03:17:52.593 回答