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})">
            <div>
                <img class='im100' src="@Url.Action("GetPicture", "Blogs", new { item.ID })" alt='5 annoying habits that are pissing off your single friends.' />
            </div>
            <div>
                <table>
                    <tr>
                        <td>
                            <div style="padding-top: 5px;">
                                <span class="article_question_format article_question_format_main_fontsize">
                                    @item.TopicName
                                </span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </a>
    </div>
}

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.

Regards

Related posts

Recent Viewed