Question

在我的项目中，我希望数据显示为左对齐。所以我选择了三个div（divSecFir，divSecSec，divSecThi）格式出现在我的网站上。

这是正确的显示：

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

但不幸的是，它的工作原理如下：

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

这是我的代码：

＆＃13;

.divSec {
    width: 100%;
    height: 15%
}

.divSec div {
    float: left;
    width: 33%
}

.divSec label {
    float: left;
    margin-left: 10px
}

＆＃13;

<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>

＆＃13;

s = [[0]*3]*3

＆＃13;

我不知道，谁可以帮助我？

Answer 1

您可以将display: inline-grid;添加到.divSec div以对齐内容。

.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 2

我认为这就是你需要的

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

Answer 3

通过bootstrap使用col-md

<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

请注意，它可能无法在代码段中正确显示，但可以按照您的要求使用

Answer 4

只需删除float:left上的.divSec label媒体资源：

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

如何使margin-left在同一个div中正常工作？

4 个答案: