html - 左右对齐文本

Question

我正在从 json 数据库中读取数据并将其显示在一个 div 中。唯一的问题是我在布局上苦苦挣扎，我有以下标题。

我希望它看起来像下面这样。(点只是为了对齐所有空格键不影响作品的位置)

站点离线................................ ..................................................... ......... 离线时间

测试站点 1................................................ ..................................................... …… .3小时

请看下面我做了什么。

function CheckSitesDownTime(){
        $.ajax({
            url: 'OfflineSites.json',
            dataType: 'json',
           type: 'get',
            cache: false,
            success: function(data) {
                $(data.SitesOffline1).each(function(index, value) {
                    console.log(value.time);
                        var para = document.createElement("h6");
var time = document.createTextNode(value.time);
para.appendChild(time);
para.className = "text-right";
console.log(para);
console.log("end");
document.getElementById("monitor-panel").appendChild(para);
                  });

            }
       });}

function CheckSites(){
        $.ajax({
            url: 'OfflineSites.json',
            dataType: 'json',
           type: 'get',
            cache: false,
            success: function(data) {
                $(data.SitesOffline).each(function(index, value) {
                    console.log(value.name);
                        var para = document.createElement("h6");
var t = document.createTextNode(value.name);
para.appendChild(t);
para.
console.log(para);
console.log("end");
document.getElementById("monitor-panel").appendChild(para);
                  });
            }
       });}

上面的代码产生了下面的布局

站点离线................................ ..................................................... ...................离线时间

测试站点 1................................................ ..................................................... ............................................................................................. ..................................................... ....................3 小时

我想我需要同时将它们附加在一起，所以像这样

para.className = "style="text-align:left";
para.appendChild(Name);
para.appendChild ("<span")
para.className = "style="float:right;";
para.appendChild (Time)
para.appendChild ("</span>")

为低质量的代码道歉，2 天前开始使用 HTML、CSS 编码，所以仍在学习。

Answer 1

现在在 css 中有一个非常有用的东西叫做 Flex box。您可以在此处详细阅读。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

你得到了上面的 float 结果原因。

以此为例。

.container{
display:flex;
justify-content: space-between;
}

<div class="container">
<span>Element 1</span>
<span>Element 2</span>
</div>