Question

我在这里创建了一个小提琴：http://jsfiddle.net/celiostat/zgUgn/

这适用于动态网页。取决于用户，它们可能是4（如示例中）或13个集合（在square上=一个集合）。图像和集合标题的高度可能会有所不同。因此，盒子的高度会有所不同，而在第二行，我在上面的集合和下面的集合之间会有一个间隙，而我希望在盒子之间保持这个空间;说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

你需要像砌体（http://masonry.desandro.com/）这样的东西来做你想要的东西，由于高度差异，没有别的方法可以做得很好。包装器正在为你破坏它。

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

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

1 个答案: