html - Web ページのコンテンツを 2 列に積み重ねて、ページ サイズを一貫させるにはどうすればよいですか

Question

Web ページを 2 列に積み重ねる必要があります。これが現在行っていることです。

これまでの私のコードは次のとおりです...

これは私の 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を CSSで使用しposition: absolute;、 oneleft: 0px;と otherを使用します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>