How to make margin-left works fine in the same div?

Question

In my project, I want data appears left justifying. So i chosed three divs(divSecFir,divSecSec,divSecThi) to format appear in my website.

Here is right showing:

RequesetWay:            Proposer:             RequestTime:
one                     John                  2017-09-08 16:04:31

But unfortunately, it works like this:

 RequesetWay:            Proposer:             RequestTime:
              one                     John     2017-09-08 16:04:31

Here is my code:

var reqStWay = "one";
var stProposer = "John";
var reqStTime = "2017-09-08 16:04:31";
$('#reqStWay').html(reqStWay);
$('#stProposer').html(stProposer);
$('#reqStTime').html(reqStTime);

.divSec {
    width: 100%;
    height: 15%
}

.divSec div {
    float: left;
    width: 33%
}

.divSec label {
    float: left;
    margin-left: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divSec">
    <div class="divSecFir">
        <label>RequesetWay:</label><br/>
        <label id="reqStWay"></label>
    </div>
    <div class="divSecSec">
        <label>Proposer:</label><br/>
        <label id="stProposer"></label>
    </div>
    <div class="divSecThi">
        <label>RequestTime:</label><br/>
        <label id="reqStTime"></label>
    </div>
</div>

I have no idea about it, Who can help me?

Answer 1

just remove the float:left property on .divSec label:

.divSec label {
    /*float:left;*/
}

Answer 2

Use col-md via bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4">
    RequesetWay:
  </div>
  <div class="col-md-4">
    Proposer:
  </div>
  <div class="col-md-4">
    RequestTime:
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    one
  </div>
  <div class="col-md-4">
    John
  </div>
  <div class="col-md-4">
    2017-09-08 16:04:31
  </div>
</div>

https://getbootstrap.com/docs/3.3/css/#grid

Note, it may not display correctly in the snippet, but it will work as you requested

Answer 3

You can add display: inline-grid; to .divSec div to align the content.

.divSec div {
    float: left;
    width: 33%;
    display: inline-grid;
}

$(function () {
    var reqStWay = "one";
    var stProposer = "John";
    var reqStTime = "2017-09-08 16:04:31";
    $('#reqStWay').html(reqStWay);
    $('#stProposer').html(stProposer);
    $('#reqStTime').html(reqStTime);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
    .divSec {
        width: 100%;
        height: 15%
    }

    .divSec div {
        float: left;
        width: 33%;
        display: inline-grid;
    }

    .divSec label {
        float: left;
        margin-left: 10px
    }
</style>

<div class="divSec">
    <div class="divSecFir">
        <label>RequesetWay:</label><br />
        <label id="reqStWay"></label>
    </div>
    <div class="divSecSec">
        <label>Proposer:</label><br />
        <label id="stProposer"></label>
    </div>
    <div class="divSecThi">
        <label>RequestTime:</label><br />
        <label id="reqStTime"></label>
    </div>
</div>

Answer 4

I think this is what you need

https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html