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，一个响应式设计的框架。无论设备如何，页面都会调整为窗口大小。

如果你想自己做，用 2div和 CSSposition: absolute;和一个left: 0px;和另一个right: 0px;。

Answer 2

尝试将您更改AddCustomer.cshtml为此

@model SuburbanCustPortal.SuburbanService.CustomerData      

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

<h2>AccountScreen</h2>

<div>
    <div class="leftdiv">
        <fieldset>
            <legend>customer info</legend>

            <div>
                @Html.Partial("CustomerInfoPartialView")
            </div>
        </fieldset>

        <fieldset>
            <legend>balance</legend>

            <div>
                @Html.Partial("BalancePartialView")
            </div>
        </fieldset>
    </div>
</div>

<div>
    <div class="rightdiv">
        <fieldset>
            <legend>customer info</legend>

            <div>
                @Html.Partial("DeliveryPartialView")
            </div>
        </fieldset>

        <fieldset>
            <legend>balance</legend>

            <div>
                @Html.Partial("SomeOtherPartialView")
            </div>
        </fieldset>
    </div>
</div>