Question

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

enter image description here

我不知道为什么。 Check out the demo here（屏幕尺寸必须小于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;
    }
}

float：左百分比div

2 个答案: