對齊兩個div標籤

Question

請參閱此頁

http://www.radioclever.stream/

正如你可以看到它輸出：

Trenutno：
艾麗·高登 - 事情妨礙您移動
Slušaoci：

但我想

Trenutno：艾麗·高登 - 事情妨礙你將
Slušaoci：1

我想任何事情，我發現在計算器並沒有什麼幫助。 這是源代碼

 <div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Trenutno:</div><div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Changing song ...</div> 
     <div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Slušaoci:</div><div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px"></div> 

Answer 1

這裏你用一碼containe R，以避免重複的樣式在每個<div>我把它放在<div>容器的風格

<div style=";background:#0277bd;color:#fff;font-family:Montserrat;font-size:14px;"> 
 
    <div class="onAir" style="display: inline-block;">Trenutno:</div> 
 
    <div class="onAir" id="track-title" style="display: inline-block;">Changing song ...</div><br> 
 
    <div class="onAir" style="display: inline-block">Slušaoci:</div> 
 
    <div class="onAir" id="listeners" style="display: inline-block">1</div> 
 
</div>

，在這裏，如果你想在中心

<div style=";background:#0277bd;color:#fff;font-family:Montserrat;font-size:14px;text-align: center;"> 
 
    <div class="onAir" style="display: inline-block;">Trenutno:</div> 
 
    <div class="onAir" id="track-title" style="display: inline-block;">Changing song ...</div><br> 
 
    <div class="onAir" style="display: inline-block">Slušaoci:</div> 
 
    <div class="onAir" id="listeners" style="display: inline-block">1</div> 
 
</div>

如果你想要它在一個l ine，刪除<br>

Answer 2

您可以使用float:left。
這裏就應該是這樣：

<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px; float:left;">Trenutno:</div> 
 
<div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px; float:left;">Changing song ...</div> 
 
<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;">Slušaoci:</div> 
 
<div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px;"></div>

或display: inline-block ，這應該如何看起來像：

<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;display: inline-block;">Trenutno:</div> 
 
<div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;display: inline-block;">Changing song ...</div> 
 
<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Slušaoci:</div> 
 
<div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px"></div>