Home » Javascript » javascript – How to design divs side by side with same left right space

javascript – How to design divs side by side with same left right space

Posted by: admin February 24, 2020 Leave a comment

Questions:

I’m really new on css and i want to show my divs side by side with same space left and right for all screens.

EDIT

Here what i tried , i tried with boostrap but still not set same space left and right

                       <div class="card_type-details">
                         <p class="section__heading">Card Details</p>
                         <div class="col-lg-12">
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
                                 <div class="row">
                                     <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-10">
                                         <label for="cardtypename">Card Number</label>
                                         <input class="form-control ng-untouched ng-pristine ng-valid" id="cardno" value="@data.VdvId" type="text" disabled>
                                     </div>
                                     <div class="form-group col-lg-1 col-md-1 col-sm-1 col-xs-2" style="visibility:hidden;">

                                     </div>
                                     <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-10">
                                         <label for="description">Card Type</label>
                                         @(Html.Kendo().ComboBox()
                                            .Name("cmbcardtype")
                                            .Items(i =>
                                                {
                                                i.Add().Text("Debit Quantity ").Value("Debit Quantity ");
                                                i.Add().Text("Debit Amount").Value("Debit Amount");
                                                i.Add().Text("Credit").Value("Credit"); 
                                            }).HtmlAttributes(new { style="width:100%;" })
                                         )
                                     </div>
                                 </div>
                             </div>
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
                                 <div class="row">
                                     <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-10">
                                         <label for="description">Behaviour</label>
                                         <input class="form-control ng-untouched ng-pristine ng-valid" id="behaviour" value="@data.Behavior" type="text">
                                     </div>
                                     <div class="form-group col-lg-1 col-md-1 col-sm-1 col-xs-2" style="visibility:hidden;">

                                     </div>
                                     <div class="form-group col-lg-5 col-md-5 col-sm-5 col-xs-10">
                                         <label for="description">Card Status</label>
                                         @*<input class="form-control ng-untouched ng-pristine ng-valid" id="cardstatus" value="@data.McrStatus" type="select">*@
                                         @(Html.Kendo().ComboBox()
                                            .Name("cmbstatus")
                                            .Items(i =>
                                                {
                                                i.Add().Text("Active").Value("Active");
                                                i.Add().Text("Passive").Value("Passive");
                                            }).HtmlAttributes(new { style="width:100%;" })
                                         )
                                         <input style="display:none;" value="@data.Limit" type="text" id="limitval" />
                                     </div>
                                 </div>
                             </div>
                         </div>

                     </div>

Here my css

.card_type-details {
    width: 90%;
    margin: 10px auto;
}

Here is the image
enter image description here

How can i do this?

How to&Answers:
div{
  float:right;
}

.row,.col-lg-12{
  width:100%;
}

.col-lg-6{
  width:50%;
    display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
}
                       <div class="card_type-details">
                         <p class="section__heading">Card Details</p>
                         <div class="col-lg-12">
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
                                 <div class="row">
                                     <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                         <label for="cardtypename">Card Number</label>
                                         <input class="form-control ng-untouched ng-pristine ng-valid" id="cardno" value="@data.VdvId" type="text" disabled>
                                     </div>
                                     <div class="form-group col-lg-1 col-md-1 col-sm-1 col-xs-2" style="visibility:hidden;">

                                     </div>
                                     <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                         <label for="description">Card Type</label>
                                                                                  <input class="form-control ng-untouched ng-pristine ng-valid" id="behaviour" value="@data.Behavior" type="text">
                                     
                                     </div>
                                 </div>
                             </div>
                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
                                 <div class="row">
                                     <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                         <label for="description">Behaviour</label>
                                         <input class="form-control ng-untouched ng-pristine ng-valid" id="behaviour" value="@data.Behavior" type="text">
                                     </div>
                                     <div class="form-group col-lg-1 col-md-1 col-sm-1 col-xs-2" style="visibility:hidden;">

                                     </div>
                                     <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                         <label for="description">Card Status</label>
                                         <input class="form-control ng-untouched ng-pristine ng-valid" id="cardstatus" value="@data.McrStatus" type="select">
                                         <input style="display:none;" value="@data.Limit" type="text" id="limitval" />
                                     </div>
                                 </div>
                             </div>
                         </div>

                     </div>

Answer:

Hope this help you.

.equalspacerow {
  padding: 0 10%;
}

.equalspace {
  padding: 0 10%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<div class="card_type-details">
  <p class="section__heading">Card Details</p>
  <div class="col-lg-12">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding ">
      <div class="row equalspacerow">
        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="equalspace">
            <label for="cardtypename">Card Number</label>
            <input class="form-control ng-untouched ng-pristine ng-valid" id="cardno" value="@data.VdvId" type="text" disabled>
          </div>
        </div>

        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="equalspace right">
            <label for="description">Card Type</label> @(Html.Kendo().ComboBox() .Name("cmbcardtype") .Items(i => { i.Add().Text("Debit Quantity ").Value("Debit Quantity "); i.Add().Text("Debit Amount").Value("Debit Amount"); i.Add().Text("Credit").Value("Credit");
            }).HtmlAttributes(new { style="width:100%;" }) )
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding ">
      <div class="row equalspacerow">
        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="equalspace">
            <label for="cardtypename">Card Number</label>
            <input class="form-control ng-untouched ng-pristine ng-valid" id="cardno" value="@data.VdvId" type="text" disabled>
          </div>
        </div>

        <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <div class="equalspace right">
            <label for="description">Card Type</label> @(Html.Kendo().ComboBox() .Name("cmbcardtype") .Items(i => { i.Add().Text("Debit Quantity ").Value("Debit Quantity "); i.Add().Text("Debit Amount").Value("Debit Amount"); i.Add().Text("Credit").Value("Credit");
            }).HtmlAttributes(new { style="width:100%;" }) )
          </div>
        </div>
      </div>
    </div>



  </div>

</div>