logo标签列表

我需要在父级div中增加一个像素。

javascriptjqueryhtmlcss
7
我有一个名为“classroom”的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>

我想要将所有的“students” 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的宽度相加就可以了？
你尝试在多个浏览器中查看吗？也许这是特定浏览器的问题？ - Eyal Alsheich
1
@EyalAlsheich：我正在使用最新版本的Firefox，我需要它能够正常工作。 - Naor
尝试在Firebug的布局选项卡中查找1像素元素，虽然从您的代码观察来看，这个问题似乎非常奇怪。我尝试在Fiddle中查看它，但图像太大了，我无法滚动它，请尝试使用较小的图像，以便我可以看到问题。 - Eyal Alsheich
Math.ceil() 可能是你的答案。 - Ja͢ck
我想我弄明白了，我更新了我的答案，这是一个好问题。 - Eyal Alsheich
@Jack：看一下我添加到Eyal的回答中的评论。 - Naor
4个回答
0

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

您正在使用jQuery调整父级大小，但是当除以三时，会进行四舍五入。在某些情况下，向下取整会导致容器太窄而无法容纳图像，第三个则会换行。如果向上取整，则有足够的空间，不会发生换行。

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

你可以使用CSS代替JavaScript吗？

将student设置为display:inline。然后将parent设置为white-space:nowrap。它们不会换行。接下来，您需要处理图像之间的空格。由于我们现在将它们设置为inline，因此html中的任何空格都会导致间隙。因此，如果您在图像容器上设置`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%;
}​
虽然这可能会解决问题，但我仍然非常好奇为什么会出现这个问题。 - Eyal Alsheich
@EyalAlsheich - 我发现浏览器的行为不一致。在Chrome中，两个示例fiddles都换行了。在Firefox和IE9中，两者都没有换行。实际上，在进一步检查后，我想我知道出了什么问题。我会更新我的答案。 - mrtsherman
1
@mrtsherman: 我希望能够仅使用CSS解决这个问题，但我认为这并不能解决问题。随着窗口大小的增加，图像部分显示。 - Naor
@Naor - 是的，我现在看到了。那么把 student 改成内联的怎么样？http://jsfiddle.net/U3gBG/7/ - mrtsherman
@mrtsherman：看起来不错。我怎样才能去掉图片之间的空格？它们没有边距和填充。是什么导致了它们？ - Naor
这是由于您的HTML中的空格被视为实际空格（请记住，我们将它们切换到了行内）。在这个 SO 问题中有几个解决方案 - https://dev59.com/6HE85IYBdhLWcg3wwWQb。我认为 font-size: 0 技巧是最好的 - http://jsfiddle.net/U3gBG/8/。 - mrtsherman
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中没有足够具体地说明你想要的样式，你没有设置宽度或高度，只是将浮动设置为学生元素，所以很容易出现奇怪的情况。尝试像这样做...

.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像素，因此每个学生框架都是100像素宽，每个边缘有2像素的边距，总宽度为306像素，留下最后一个学生框架右侧的2像素，所以所有这些加起来...根据你需要的宽度和考虑到边距进行计算。希望这能帮到你... :)

移除链式编程不会对呈现的CSS产生任何影响。这与OP的问题完全无关。为什么要告诉他将其删除？抱歉，但您的回答甚至没有意义。您正在浮动教室容器，而本来不应该浮动。浮动图像没有实际效果。您应该重新考虑这个答案。 - mrtsherman
我没有学生的宽度。 - Naor
0

当我在IE9下查看调试界面时，检查了您的div元素和图像元素，似乎第一张图片的宽度为999.95而不是一个整数值，其他两个图片也有非整数的宽度值。

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

编辑：

我认为问题源于CSS值height: 100％，这意味着宽度是计算出来的而不是固定的实际图像尺寸，因此像素宽度有非整数值，所以为了继续使用这种放置图像的方法，您将必须在添加父div的总宽度时使用math.ceil() 或类似的内容。

Math.ceil 不起作用，因为每个学生的宽度都是整数。无论何时我执行 w += $(this).width()，$(this).width() 都会返回一个整数而不是“double类型”的数字。 - Naor
-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>

并修复您的图片尺寸

虽然您的建议可以完美地显示图像，但这并不是这个问题所关注的内容。 - Eyal Alsheich
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接