我在这里创建了一个小提琴: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;
}
答案 0 :(得分:0)
你需要像砌体(http://masonry.desandro.com/)这样的东西来做你想要的东西,由于高度差异,没有别的方法可以做得很好。包装器正在为你破坏它。
也许另一个想法是为每列而不是每一行创建包装器。