浮動：左百分比

我有幾個百分比大小的div和在屏幕max-width:1030px divs在50％。但是第五個div在繼續之前留下空白。浮動：左百分比

enter image description here

我不知道爲什麼。 Check out the demo here（屏幕尺寸必須大於1030px小，看它）

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; 
    } 

}

來源

2013-07-22 mr.musicman

第1列，第3列向下。我會張貼圖片 –

對不起，我忘了縮小我的瀏覽器寬度。我刪除了空白區域上方的圖像，並將所有圖像按預期分開。白色空間上方的圖片略高，它會阻止空白右側的圖片正確地浮動到左側。您可以通過爲所有圖片添加高度屬性來解決此問題（確保它們完全相同），或者只是縮小一張照片 – Trojan

您的第三張圖片比其他圖片高1個像素，這會導致第五張圖片浮動以勾住它。修正高度問題，或者在媒體查詢中的每個第二個元素上添加某種'clear' – Pevara

添加到這個媒體查詢：

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

基本上，它只是增加了一個明確的類每一秒的圖像，即1,3,5,7,9等

請記住，瀏覽器支持（IE）可能有問題 - 請參閱caniuse.com，但如果你不打擾那些仍在使用IE8及以下的那些，那麼這將完美的工作！

祝你好運。

編輯也許明智的做法是在明確的類中添加全尺寸，而不僅僅是媒體查詢。

這是完整的CSS。請注意，媒體查詢現在會從（3n-2）選擇器中刪除清除類，然後重新應用它，以避免清除您不想要的額外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; 
    } 
}

來源

2013-07-24 13:33:54

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

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

}

之前的元素有一個稍微更高的高度，並推動/創造額外的空間

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

來源

2013-07-22 22:58:40 feitla

由於佈局反應靈敏，我在調整屏幕大小時仍然遇到問題（即使在jsfiddle中）。另外，對於更大的屏幕，我仍然希望圖像更高。 –

浮動：左百分比

回答

相關問題