how to put up mi DIV in stead of showing just line by line..

hi, i got a list of images done with bootstrap and each line contains 3 pictures, till here all fine.. the problem is that if one picture is smaller then i have an empty space between the picture on the top and the one on the bottom…  well.. i would love
the bottom picture to go up and avoid the empty space (like happen in pinterest)

An example to understand better what i am talking about ;

This is the code :

<div class="col-md-12" align="center">
                    @for (int t = 0; t < columns; t++)
                    {
                        var g = (i * columns) + t;

                        <div class="col-md-4" align="center">
                            <div class="product-image-wrapper">
                               
                                    <a href="@Url.Action("Article", "Magazine", new { id = Model.ElementAt(g).MagazineId, title = Model.ElementAt(g).MagazineTitle.URLFriendly() })">
                                        <div>@Html.Raw(MagazineTitle)</div>
                                        <div><img src="~/Content/MagazineImages/@Model.ElementAt(g).MagazinePhotoBis " alt="@MagazineTitle" border="0" width="200" /></div>

                                    </a>

                                    <div>@Html.Raw(MenuName)</div>
                                    <div>@Html.Raw(SubMenuName)</div>

                                    <ul id="Buttonmenufrancesco">
                                        @{
                                    var externalurl = "http://" + ViewRes.Shared.Siteaddress + "/Magazine/Details/" + Model.ElementAt(g).MagazineId + "/" + MagazineTitle.URLFriendly();
                                    var title = MagazineTitle.URLFriendly();
                                    var urltwitter = "https:" + "//twitter.com/intent/tweet?url=" + externalurl + "&text=" + "&via=" + title;
                                    var urlfacebook = "https:" + "//facebook.com/sharer.php?u=" + externalurl;
                                    var urlgoogle = "https:" + "//plus.google.com/share?url=" + externalurl;

                                    <li>&nbsp;</li>
                                            <li><a href="@urlfacebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
                                            <li>&nbsp;</li>
                                            <li><a href="@urltwitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
                                            <li>&nbsp;</li>
                                            <li><a href="@urlgoogle" target="_blank"><i class="fa fa-google-plus"></i></a></li>

                                        }

                                        <li>&nbsp;</li>
                                        <li>
                                            <div class="formfrancescoinline">
                                                @using (Ajax.BeginForm("Userslikes", "Magazine", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = string.Format("like{0}", Model.ElementAt(g).MagazineId) }))
                                                {

                                                    @Html.Hidden("magazineid", Model.ElementAt(g).MagazineId)

                                                    @Html.Hidden("sortOrder")
                                                    @Html.Hidden("currentFilter")
                                                    @Html.Hidden("page")

                                                    <input type="image" src="~/Content/Images/like_down.png" class="like_down_submit" height="25" border="0" value="" />
                                                }
                                            </div>
                                        </li>
                                        <li>&nbsp;</li>
                                        <li>


                                            <div id="@string.Format("like{0}", Model.ElementAt(g).MagazineId)" class="formfrancescoinline">
                                                @Html.Partial("Userslikes", Model.ElementAt(g).Likes)
                                            </div>

                                        </li>


                                       


                                    </ul>

                                }
                            </div>

                        </div>
                    }

this is the class

.product-image-wrapper{
	border:1px solid #F7F7F5;
	/*overflow: hidden;*/
	margin-bottom:30px;
}

how to do ?

Hi graphic,

Thanks for your post.

Firstly, according to your screenshot, I find that width and height of each <div class=”col-md-4”> is differrnt, so it is difficult for us to design page layout. could you show some code about
col-md-4 class?

Secondly, Based on my experience, we should set element <div class=”col-md-4”> as block element and set appropriate width and height to it as below.

.col-md-4 {
            display: block;
            width: 30%;
            height: 200px;
            float: left;
            margin-left: 2%;
            margin-bottom:30px;
        }

Any question about my reply, please let me know freely.

Best Regards,

Fei Han

Hi, i reduced the size of the picture to better understand my problem!!!

Somebody can resolve it?

Hi grafic.web

Have you referred to my suggestion? It may solve your problem, please try it.

Best Regards,

Fei Han

Hi, your code does not work… what is wrong?

I update my code with your csss here :

        <div class="row">
            @{ var columns = 3; var rowCount = Model.Count() / columns; var remainder = Model.Count() % columns; if (remainder != 0) { rowCount += 1; } for (int i = 0; i < rowCount; i++)
             {
                <div class="col-md-12" align="center">
                    @for (int t = 0; t < columns; t++)
                    {
                        var g = (i * columns) + t;

                        <div class="col-md-4" align="center" style="display: block; width: 30%; height: 200px; float: left; margin-left: 2%; margin-bottom:30px;">
                            <div class="product-image-wrapper">

and this is the result, all the picture one above the others..

grafic.web

<div class="col-md-4" align="center" style="display: block; width: 30%; height: 200px; float: left; margin-left: 2%; margin-bottom:30px;">

Don’t specify a height. Try below

<div class="col-md-4" align="center" style="width: 30%; height: auto; display: inline; margin-left: 2%; margin-bottom:30px;">

Hi, nothing cahnge…. same thing..

have you got another code to accomplish this?

I am happy to cahnge my code…

Thanks

Leave a Reply