Question

我在这里有两个div，左边的部分是“Sumar”和“Alumno”，右边的部分是表格。

enter image description here

如果表单内容存在验证问题，则会显示消息，使div调整大小以适应内容。左侧div不会调整大小以匹配：

enter image description here

如何让左div调整大小以匹配正确的div？

[更新]

查看：

@model Biblioteca.Models.SapDepoViewModel
 @{
    ViewBag.Title = "SapDepo";
 }
 <body class="background-greenbkg">
<div class="container bold-titty" id="wite-color">               
    <div class="col-md-12">
        <h2 class="cajita-titulo textofont"><i class="fa fa-bolt" style="color:yellow"></i>  Sap | Depósito <i class="fa fa-money" style="color:green"></i> </h2>
    </div>

    <div class="hidden-xs hidden-sm col-md-1 col-md-push-4 margin-top-bot2 colorcajitaizqsap">
        <div class="row height-sidetitle-sap padding-edit">
            <i class="fa fa-dollar"></i>
            <p id="fontiponki">Sumar</p>
            <p id="minifont">Alumno</p>
        </div>
    </div>
        @using (Html.BeginForm("SapDepo", "Alumnos", FormMethod.Post))
        {
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true, "", new {@class = "text-danger"})
            @Html.HiddenFor(x => x.AlumnosId)

            <div class=" hidden-xs hidden-sm col-md-push-4 col-md-4 cajita">
                <section id="SapDepoAlumnos" >
                    <div class="form-group">
                        <div class="row">                                
                            <div class= "col-md-push-1 col-md-5">
                                @Html.LabelFor(x => x.Sap, htmlAttributes: new {@class = "control-label col-md-2"})
                            </div>
                            <div class="col-md-6">
                                @Html.EditorFor(x => x.Sap, new {htmlAttributes = new {@class = "form-control"}})
                                @Html.ValidationMessageFor(x => x.Sap, "", new {@class = "text-danger"})
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-push-1 col-md-5">
                                @Html.LabelFor(x => x.Deposito,"Depósito", htmlAttributes: new {@class = "control-label col-md-2"})
                            </div>
                            <div class="col-md-6">
                                @Html.EditorFor(x => x.Deposito, new {htmlAttributes = new {@class = "form-control"}})
                                @Html.ValidationMessageFor(x => x.Deposito, "", new {@class = "text-danger"})
                            </div>
                        </div>
                    </div>
                </section>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <input type="submit" value="Agregar" class="btn btn-success" style="border-radius: 4px; width: 100%" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <a href="/Alumnos/Index"> <input type="submit" value="Cancelar transacción" class="btn btn-danger" style="border-radius: 4px; width: 100%" /></a>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

div的CSS：

 //Right side
 .margin-top-bot2 {
     margin-top: 61px;
     margin-bottom: 10px;
 }

 .colorcajitaizqsap {
     /*background-color: rgba(250, 255, 0,0.2);*/
     background: repeating-linear-gradient(
   45deg,
  rgba(107, 153, 85, 0.65),
  rgba(107, 153, 85, 0.65) 10px,
  rgba(0, 54, 41, 0.65) 10px,
  rgba(0, 54, 41, 0.65) 20px
  );
     border-radius: 10px 0 0 10px;
       }

.height-sidetitle-sap {
     height: 225px;

}

 .padding-edit {
    padding-left: 20px;
   font-size: 60px;
}

//Left side
.cajita {

padding-top: 30px;
color: #ffffff;
text-align: center;
background-color: rgba(0, 0, 0,0.3);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 0 10px 10px 0;
margin-top: 60px;
}

Answer 1

Razor不会妨碍您的布局，也不会无法修改您的布局。一个例子如下。

<!-- Front-End: -->
<div class="Container">
     <div class="Column-Small">
          <!-- Insert Additional Styling & Razor -->
     </div>

     <div class="Column-Large">
          <!-- Insert Additional Styling & Razor -->
     </div>
</div>

因此，您的Razor语法将在内部，具有其他结构。哪个会满足您的模型，这将显示。然后您的样式表将具有响应式布局，如：

.Container {
     width: 90%;
     margin: 0 auto;
     clear: both;
}

.Column-Small {
     width: 10%;
}

.Column-Large {
     width: 80%;
}

[class*="Column-"] {
     height: 10rem;
     border: 1px solid #000;
     float: left;
}

请记住，这个例子很简单，就是一个例子。目标是确保容器元素内的最大高度，而无需额外的标记，我们将无法提供帮助。

希望这对您有所帮助，请记住，Razor不应该改变您的布局，而应该在布局中使用您的数据。

Answer 2

您正在预定义左列的高度，而不是让它自动调整大小。请注意，div继承自.height-sidetitle-sap，其定义为：

.height-sidetitle-sap {
    height: 225px;
}

删除它，然后通过填充或边距修复内部内容的高度和位置，并应适当调整大小。

如何使<div>响应另一个<div>？

2 个答案: