如何獲得堆棧我的網頁內容到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

試着改變你的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> 

Answer 2

您可以使用Bootstrap作爲響應式設計的框架。無論設備如何，頁面都會根據窗口大小進行調整。

如果您想自己動手，請使用2 div，其中包含CSS position: absolute;和一個left: 0px;以及另一個right: 0px;。