html - 删除堆叠的上下框之间的间隙

Question

我在这里创建了一个 fiddle :http://jsfiddle.net/celiostat/zgUgn/

这是一个动态网页。根据用户的不同，它们可能是 4 个(如示例中所示)或 13 个集合(在正方形上 = 一个集合)。图片的高度和收藏标题可能会有所不同。因此 boxe 高度变化，在第二行，我在上面的集合和下面的集合之间有一个间隙，而我想保持盒子之间的空间均匀；说25px。 感谢您的帮助!

HTML:

    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Thai favorites</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>

    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2013/07/19/FNM_090113-Name-This-Dish-Stacked-Salad-Recipe_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Best France food stuff</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>
    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Snacks</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>
    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://www.secondhomemalaysia.co.uk/uploads/Food3.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Soups and veloutes</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>

CSS:

body
{
    background-color: #ECF0F1;
}


.container
{
    max-width: 550px;
    width: 100%;
    margin: 0px auto;
    position: relative;
}


.table_presentation_two_column
{
    height: auto;
    display: table;
    width: 100%;
    margin: 0 auto;
}

.collection_bookmars_container
{
    height: auto;
    background-color: white;
    display: inline-block;
    vertical-align: top;
    width: 46%;
    box-sizing: border-box;
    margin: 20px 2% 0% 2%;
}

.collection_random_image
{
    margin-bottom: 10px;
    width: 100%;
}


.collection_bookmark_title_container
{
    margin: 30px 4% 0px 4%;
}


.collection_bookmark_title
{
    font-family: "Roboto Slab","serif";
    font-size: 30px;

}

.modify_collection_container
{
    margin-top: 10px;
    margin: 20px 4% 0px 4%;
    padding-top: 15px;
    border-top: 3px solid #EBEBEB;
    width: 92%;
}

.number_of_articles
{
    font-size: 16px
    font-family: "Montserrat";
    padding-bottom: 4px;
    color: #AFAFAF;
    font-weight: bold;
}

.article_text_only
{
    font-size: 16px;
    font-family: "Montserrat";
    padding-bottom: 4px;
    color: #AFAFAF;
    font-weight: bold;
}

.icon_modify_collection
{
    float: right;
    position: relative;
    overflow: hidden;
    width: 12%;
    max-width: 250px;
    padding-bottom: 10px;
    margin-top: -5;
}

Answer 1

你需要像 Masonry ( http://masonry.desandro.com/ ) 这样的东西来做你想做的事，由于高度差异，没有其他方法可以很好地做到这一点。 wrapper 正在为您破坏它。

也许另一个想法是为每一列而不是每一行创建包装器。