html - 如何将我的网页内容堆叠到 2 列中并在页面大小上保持一致

Question

我需要我的网页堆叠成两列，这就是它现在正在做的:

到目前为止，这是我的代码...

这是我的 AddCustomer.cshtml:

@model SuburbanCustPortal.SuburbanService.CustomerData      

@{
    ViewBag.Title = "Account Screen";
 }

<h2>AccountScreen</h2>

<div>
   <fieldset class="leftdiv">
    <legend>customer info</legend>
    <div>   
      @Html.Partial("CustomerInfoPartialView")
    </div>
  </fieldset>
  <fieldset class="rightdiv">  
    <legend>balance</legend>
    <div>
      @Html.Partial("BalancePartialView")
    </div>
  </fieldset>
</div> 
<div>
   <fieldset class="leftdiv">
    <legend>customer info</legend>
    <div>   
      @Html.Partial("DeliveryPartialView")
    </div>
  </fieldset>
  <fieldset class="rightdiv">  
    <legend>balance</legend>
    <div>
      @Html.Partial("SomeOtherPartialView")
    </div>
  </fieldset>
</div>

这是我的 BalancePartialView.cshtml:

@model SuburbanCustPortal.SuburbanService.CustomerData

          <div  class="leftdiv">
            <label class="sizedCustomerlabel">Over 30:</label>
            <label class="sizedCustomerlabel">Over 60:</label>
            <label class="sizedCustomerlabel">Over 90:</label>
            <label class="sizedCustomerlabel">Over 120:</label>
            <label class="sizedCustomerlabel">Current:</label>
          </div>

          <div class="rightdiv">
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Over30)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Over60)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Over90)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Over120)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.CurrentBalance)</label>
          </div>

这是 CustomerInfoPartialView:

@model SuburbanCustPortal.SuburbanService.CustomerData


          <div  class="leftdiv">
            <label class="sizedCustomerlabel">Account Number:</label>            
            <label class="sizedCustomerlabel">Name:</label>
            <label class="sizedCustomerlabel">Care of:</label>
            <label class="sizedCustomerlabel">Mailing Address:</label>
            <label class="sizedCustomerlabel">City/St/Zip:</label>
            <label class="sizedCustomerlabel">Delivery Address:</label>
            <label class="sizedCustomerlabel">Delivery City:</label>
          </div>

          <div class="rightdiv">
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Branch) - @Html.DisplayFor(model => model.AccountNumber)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Name)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.CareOf)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.Street)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.City),&nbsp;@Html.DisplayFor(model => model.State)&nbsp;&nbsp;@Html.DisplayFor(model => model.ZipCode)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.DeliveryStreet)</label>
            <label class="sizedCustomerDataLeftLabel">@Html.DisplayFor(model => model.DeliveryCity)</label>
          </div>

最后，我的 CSS:

.sizedCustomerlabel 
{
  display: block;
  width: 8em;
  padding: .1em;
  text-align: right;
}

.sizedCustomerDataRightlabel 
{
  display: block;
  width: 5em;
  text-align: left; 
  padding: .1em;
}

.sizedCustomerDataLeftLabel 
{
  display: block;
  width: 20em;
  text-align: left; 
  padding: .1em;
}

.SmallRedlabel 
{
  display: block;
  font-size: 10px;
  padding: .1em;
  text-align: left;
  color: blue;
}

.rightdiv {
    float: right;
    width: 45%;
    text-align:left
}
.leftdiv {
    float: left;
    width: 45%;
    text-align:left
}

.bigarealabel {
    margin:250px 50px;
}

谁能告诉我如何比我现在做的更好地实现这一目标？他们的方式我会这样做是废话。我觉得我正在尝试用石头做一个粘土碗哈哈。

Answer 1

您可以使用 Bootstrap ，响应式设计的框架。无论设备如何，页面都会调整为窗口大小。

如果你想自己做，使用 2 个 div 和 CSS position: absolute; 和一个 left: 0px; 和其他 右:0px;.