我这里有两个 div，左边的部分是“Sumar”和“Alumno”，右边的部分是表格。
当表单内容存在验证问题时，会出现消息，使正确的 div 调整大小以适合内容。左侧 div 未调整大小以匹配:
如何使左侧 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;
}
最佳答案
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 不应更改您的布局，而应使您的数据适合布局。
关于c# - 如何让一个 <div> 响应另一个 <div>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30204414/