html - 浮动：左百分比div

Question

我有几个百分比大小的 div，屏幕上max-width:1030px的 div 为 50%。但是第五个 div 在继续之前留下了一个空白区域。

Jsfiddle在这里

我不知道为什么。在这里查看演示（屏幕尺寸必须小于 1030 像素才能看到）

HTML

<div class="video-grid">
    <div class="vimeo">
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/435/991/435991395_640.jpg" />
        </a>
    </div>
    <div class="vimeo">
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/436/269/436269192_640.jpg" />
        </a>
    </div>
    <div class="vimeo"> 
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/436/115/436115827_640.jpg" />
        </a>
    </div>
    <div class="vimeo"> 
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/435/991/435991608_640.jpg" />
        </a>
    </div>
    <div class="vimeo"> 
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/435/991/435991608_640.jpg" />
        </a>
    </div>
    <div class="vimeo"> 
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://new.stevenspiel.com/wp-content/themes/Photum/images/kiss.jpg" />
        </a>
    </div>
    <div class="vimeo"> 
        <a class="fancybox-media" href="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23">
            <img alt="" src="http://b.vimeocdn.com/ts/435/991/435991206_640.jpg" />
        </a>

    </div>
</div>

CSS

.video-grid {
    width:100%;
}

.vimeo {
    max-width:400px;
    min-width:250px;
    width:33%;
    float:left;
}

.vimeo img {
    width:90%;
    padding:5%;
}


@media screen and (max-width:1030px) {
    .vimeo {
        width:50%;
        min-width: 170px;
    }

}

Answer 1

您需要添加height="216px"或添加max-height到.vimeo元素

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

}

之前的元素具有稍高的高度，并且正在推动/创造额外的空间

http://jsfiddle.net/feitla/ubH5h/

Answer 2

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

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

基本上，它只是为每隔一个图像添加一个清晰的类，即 1、3、5、7、9 等。

请记住，浏览器支持 (IE) 可能会出现问题 - 请参阅caniuse.com，但如果您不介意那些仍在使用 IE8 及以下版本的用户，那么这将完美运行！

祝你好运。

编辑为全尺寸添加一个清晰的类也可能是明智的，而不仅仅是媒体查询。

这是完整的 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;
    }
}