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

对质量欠佳的代码表示歉意，两天前开始使用HTML，CSS进行编码，因此仍然可以学习。

Answer 1

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

您得到了导致浮动的上述结果原因。

以这个为例。

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

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

Answer 2

您可以将display作为网格用于对齐项目：

   .grid-container {
        display: grid;
        background-color: #ccc;
        padding: 3%;
    }

    .grid-container>div {
        background-color: grey;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }

    .item1 {
        grid-area: 1 / 3 / 2 / 4;
    }

    .item0 {
        grid-area: 1 / 1 / 2 / 2;
    }

<div class="grid-container">

    <div class="item1">Left</div>

    <div class="item0">Right</div>

</div>

Answer 3

Vasilis's答案的变化形式，其CSS中带有前导点。

.row {
  display: flex;
  width: 20em;
  justify-content: space-between;
}

.row span:not(.dots) {
  flex: 1 0 auto;
  padding: 0 10px;
}

.row .dots {
  flex: 0 1 auto;
}

.row .dots::before {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
}

<div class="row">
  <span>Element 1</span>
  <span class="dots"></span>
  <span>Value 1</span>
</div>
<div class="row">
  <span>Element 2</span>
  <span class="dots"></span>
  <span>Value 2</span>
</div>

<div class="row">
  <span>Element 3</span>
  <span class="dots"></span>
  <span>Value 3</span>
  </div

左右对齐文本

3 个答案: