Question

我有跟随ASP.Net MVC剃刀代码。

@{
    foreach (var note in Model.Notes)
    {
        <div class="row data-area" style="margin-bottom:5px !important">
            <div class="small-2 columns magmalabel" style="background-color:#01466d;">
                @Html.DisplayFor(m => note.NoteTypeId)
            </div>
            <div class="small-10 columns">
                @Html.DisplayFor(m => note.Notes)
            </div>
        </div>
    }
}

这样可行，但有时候，由于长度的原因，第二列字会换行，这是设计的，但显示的是第一个div：

@Html.DisplayFor(m => note.NoteTypeId)

没有得到正确的格式，因为它没有为第二行着色。

我知道这是一个高度问题，因为到目前为止，我设法做到这一点的唯一方法是将Chrome属性设置为Chrome控制台的两倍。

                <div class="small-2 columns magmalabel" style="background-color:#01466d;height:50px;">

在Chrome中，单个高度等于25px＆＃39>

我看过SO并看到了很多解决方案，但到目前为止还没有任何解决方案。

Answer 1

不得不诉诸一些jQuery来解决这个问题。

在标记中添加了占位符类rowHeading，如下所示：

<div class="row data-area" style="margin-bottom:5px !important">
    <div class="small-2 columns magmalabel rowHeading" style="background-color:#01466d;">
        @Html.DisplayFor(m => note.NoteTypeId)
    </div>
    <div class="small-10 columns">
        @Html.DisplayFor(m => note.Notes)
    </div>
</div>

然后简单地添加以下jQuery脚本：

  $('.rowheading').each(function () {
        var parentHeight = $(this).parent().height();
        $(this).height(parentHeight);
    });

这使浏览器能够为页面上的所有div设置行高，以正确格式化高度。

div的样式背景颜色当div高度改变时

1 个答案: