It has been a while since I am struggling to find a way for my problem but failed. I create a grid block in an html/razor view using the following html.

@foreach (var item in Model.Take(6))
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4" style="padding:10px 5px;">
        <a href="@Url.Action("Details", "Read", new { item.ID})">
                <img class='im100' src="@Url.Action("GetPicture", "Blogs", new { item.ID })" alt='5 annoying habits that are pissing off your single friends.' />
                            <div style="padding-top: 5px;">
                                <span class="article_question_format article_question_format_main_fontsize">

This seems working fine when I place a static text for the table. Example: "A quick silly fox jumped over the lazy brown dog" however when I try to fetch text from the database the CSS style break and the regular grid changes to an irregular. Below is a screen shot of the grid when I try to fetch text from database into table. Irregular Grid Here is the second screen shot what I want to have. Regular Grid Look Like

So the main question. Is there any only css/html workaround for this issue not javascript solutions.


Related posts

Recent Viewed