刪除浮動元素前後的空格

浮動元素應該並排排列（如列）。但是，如果我們必須將一些浮動元素推到其他浮動元素下面，它會創建一些空白。我講的這個結構，其中可以發生的事情：刪除浮動元素前後的空格

<div class="row clearfix"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
</div>

考慮CSS：

@media screen and (max-width: 991px) { 
    .col { 
     width: 50%; 
}

}

在那種情況下，這將是發生（< 992px屏幕）：

我不是萬能那額外的差距。我想這一點：

如何刪除多餘的空間，而不改變HTML的結構？

Fiddle demo

來源

2017-02-27 user1896653

我嘗試擺弄它，因爲百分比％你加入寬度50％您可以切換到像素的靜態數量，如果將與要求的工作。

我只是切換

@media screen and (max-width: 991px) { 
    .col { 
     width: 50%; 
}

與

@media screen and (max-width: 991px) { 
    .col { 
    width: 250px; 
    height: 250px; 
    }

Find Edit Here

來源

2017-02-27 10:59:33

固定寬度是不可能的，因爲它是響應式的。由於內容是動態的，固定高度是不可能的。 – user1896653

我認爲你必須使其中一個靜態和其他動態我沒有現在，如果有一些解決方案，使兩者都動態工作 –

你可以在頁面加載和窗口大小調整使用jQuery代碼：

$('.col').each(function(i, el) { 

    if (i % 2 === 0) { 

    if ($(el).height() > $(el).next().height()) { 

     $(el).next().height($(el).height()); 

    } else { 

     $(el).height($(el).next().height()); 

    } 

    } 

});

https://jsfiddle.net/fabio1983/nhj1x1br/3/

來源

2017-02-27 11:23:52 Fabio

其實，我不想平等的高度，我希望沒有額外的空間;像這樣：http://i.imgur.com/eQzEJH4.png – user1896653

刪除浮動元素前後的空格

回答

相關問題