当前位置: 动力学知识库 > 问答 > 编程问答 >

css - display grid view with different height -- HTML

问题描述:

I want to display images as grid view in an HTML document. Here is the sample image, what an looking for.

I want different height for my li tag. Now my HTML takes same height for all li tag .

This is my html

<div class="blog_main_midd_section"><ul>

<li>

<div class="blog_images">

<img src="images/blog_img01.png" alt="">

</div>

</li>

<li>

<div class="blog_images">

<img src="images/blog_img02.png" alt="">

</div>

</li>

<li>

<div class="blog_images">

<img src="images/blog_img03.png" alt="">

</div>

</li>

<li>

<div class="blog_images">

<img src="images/blog_img04.png" alt="">

</div>

</li>

<li>

<div class="blog_images">

<img src="images/blog_img05.png" alt="">

</div>

</li>

</ul>

</div>

CSS

.blog_main_midd_section {

display:block;

}

.blog_main_midd_section ul {

display:block;

margin:0 0 75px 0;

}

.blog_main_midd_section ul li {

display:inline-block;

border:1px solid #50565a;

width:31%;

padding:0 0 20px 0;

height:auto;

margin:15px 1%;

vertical-align:top;

}

can anyone please advice me how to do it.

Thanks in advance

网友答案:

To display elements on your page as a grid view you can use one of existing jquery plugins which work as a charm and with nice animations. You can find one which suits your need in this post or just search for "jquery plugin grid".

分享给朋友:
您可能感兴趣的文章:
随机阅读: