左右对齐文本

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/

您会得到上面的结果，原因是浮动。

以这个为例。

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

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

Answer 2

您可以将显示用作对齐项目的网格：

.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

瓦西里斯答案的变体，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