Html 浮动：左百分比div

我有几个百分比大小的div，在屏幕

max width:1030px

上，div为50%。但是第五个div在继续之前留下了一个空白

我不知道为什么。（屏幕大小必须小于1030px才能看到它）

HTML

---

您需要将

height=“216px”

或

max height

添加到

.vimeo

元素中

    .vimeo {
        max-width:400px;
        max-height:216px;;
        width:33%;
        float:left; 

}

前面的元素的高度稍高，并且正在推动/创建额外的空间

---

您需要将

height=“216px”

或

max height

添加到

.vimeo

元素中

    .vimeo {
        max-width:400px;
        max-height:216px;;
        width:33%;
        float:left; 

}

前面的元素的高度稍高，并且正在推动/创建额外的空间

---

将此添加到您的媒体查询中：

.vimeo:nth-of-type(2n-1) {
   clear:both;
}

基本上，它只是在每秒钟的图像中添加一个清晰的类，即1、3、5、7、9等

请记住，浏览器支持（IE）可能会有问题–请参阅，但如果您不担心那些仍在使用IE8及以下版本的用户，那么这将非常有效

祝你好运

编辑明智的做法是为完整大小添加clear类，而不仅仅是媒体查询

这是完整的CSS。请注意，媒体查询现在也会在重新应用之前从（3n-2）选择器中删除clear类，以避免清除不需要的额外div

希望有帮助

.video-grid {
    width:100%;
}
.vimeo {
    max-width:400px;
    min-width:250px;
    width:33%;
    float:left;
}
.vimeo:nth-of-type(3n-2) {
    clear:both;
}
.vimeo img {
    width:90%;
    padding:5%;
}
@media screen and (max-width:1030px) {
    .vimeo {
        width:50%;
        min-width: 170px;
    }
    .vimeo:nth-of-type(3n-2) {
        clear:none;
    }
    .vimeo:nth-of-type(2n-1) {
       clear:both;
    }
}

---

将此添加到您的媒体查询中：

.vimeo:nth-of-type(2n-1) {
   clear:both;
}

基本上，它只是在每秒钟的图像中添加一个清晰的类，即1、3、5、7、9等

请记住，浏览器支持（IE）可能会有问题–请参阅，但如果您不担心那些仍在使用IE8及以下版本的用户，那么这将非常有效

祝你好运

编辑明智的做法是为完整大小添加clear类，而不仅仅是媒体查询

这是完整的CSS。请注意，媒体查询现在也会在重新应用之前从（3n-2）选择器中删除clear类，以避免清除不需要的额外div

希望有帮助

.video-grid {
    width:100%;
}
.vimeo {
    max-width:400px;
    min-width:250px;
    width:33%;
    float:left;
}
.vimeo:nth-of-type(3n-2) {
    clear:both;
}
.vimeo img {
    width:90%;
    padding:5%;
}
@media screen and (max-width:1030px) {
    .vimeo {
        width:50%;
        min-width: 170px;
    }
    .vimeo:nth-of-type(3n-2) {
        clear:none;
    }
    .vimeo:nth-of-type(2n-1) {
       clear:both;
    }
}

---

第1列，向下第3行。我将发布一张图片。对不起，我忘了缩小我的浏览器宽度。我删除了空白空间上方的图像，所有的图像都按照预定的间隔排列。空白处上方的图片有点太高；它阻止了右边空白处的图片正确地向左浮动。你可以通过为所有图片添加一个高度属性（确保它们都相同）来解决这个问题，或者简单地缩小其中一张照片——你的第三张图片比其他图片高1个像素，这会导致第五张图片浮动到“挂钩”后面。修复高度问题，或在媒体中的每一秒添加某种

清除
query@PeterVR当每行有三个元素时，每秒清除一个
元素是否会影响布局？是的，这就是为什么您应该将它放在媒体查询中的原因。你应该用谷歌搜索：nth child伪类，因为它在这里很方便…第一列，第三行。我将发布一张图片。对不起，我忘了缩小我的浏览器宽度。我删除了空白空间上方的图像，所有的图像都按照预定的间隔排列。空白处上方的图片有点太高；它阻止了右边空白处的图片正确地向左浮动。你可以通过为所有图片添加一个高度属性（确保它们都相同）来解决这个问题，或者简单地缩小其中一张照片——你的第三张图片比其他图片高1个像素，这会导致第五张图片浮动到“挂钩”后面。修复高度问题，或在媒体中的每一秒添加某种
清除
query@PeterVR当每行有三个元素时，每秒清除一个
元素是否会影响布局？是的，这就是为什么您应该将它放在媒体查询中的原因。您应该搜索：nth child伪类，因为它在这里很方便……由于responsive布局，我在调整屏幕大小时仍然会遇到问题（即使在JSFIDLE中）。此外，对于更大的屏幕，我仍然希望图像更高。由于responsive布局，我在调整屏幕大小时仍然会遇到问题（即使是在JSFIDLE中）。另外，对于更大的屏幕，我仍然希望图像更高。