如何讓兩個div對齊？

Question

我在我的項目中有兩個div（dlgR和dlgDivR）。

dlgR的內容應顯示在第一行，dlgDivR的內容應顯示在第二行。下面是我想：

22:09:06 snow accept 
    johntakeit 

但實際上，他們是在同一行，像這樣：

johntakeit 22:09:06 snow accept 

這裏是CSS和HTML：

.dlgR { 
 
    float: right 
 
} 
 

 
.dlgDivR { 
 
    float: right; 
 
    text-align: right; 
 
    margin-right: 5%; 
 
    background: #E0FFFF; 
 
    max-width: 70% 
 
}

<div class="dlgR"><label>22:09:06</label>&nbsp;<label>snow</label><label>&nbsp;accept</label></div> 
 
<div class="dlgDivR"><span class="dlgSpan">johntakeit</span></div>

也許原因是這些div在jQuery UI的選項卡中。但我不知道這件事。誰能幫我 ？

Answer 1

所有你需要的是要明確在你.dlgDivR

浮法給它clear: right;，它會正常工作

.dlgR { 
 
    float: right; 
 
} 
 

 
.dlgDivR { 
 
    float: right; 
 
    clear: right;     /* added property */ 
 
    text-align: right; 
 
    margin-right: 5%; 
 
    background: #E0FFFF; 
 
    max-width: 70% 
 
}

<div class="dlgR"><label>22:09:06</label>&nbsp;<label>snow</label><label>&nbsp;accept</label></div> 
 
<div class="dlgDivR"><span class="dlgSpan">johntakeit</span></div>

Answer 2

這是你想達到什麼目的？我添加了一個浮動右包裝和改變風格一點：

.wrapper { 
 
    float:right 
 
} 
 
.dlgDivR { 
 
    margin:auto; 
 
    text-align:center; 
 
    background:#E0FFFF; 
 
    max-width:70% 
 
}

<div class="wrapper"> 
 
    <div class="dlgR"><label >22:09:06</label>&nbsp;<label >snow</label><label>&nbsp;accept</label></div> 
 
    <div class="dlgDivR"><span class="dlgSpan" >johntakeit</span></div> 
 
</div>

Answer 3

佈局是Flexbox，就相對簡單。

使兩個div的父容器成爲一個彈性容器。然後使用柔性屬性來右對齊孩子。

不需要更改HTML。

body { 
 
    display: flex;   /* establish flex container */ 
 
    flex-direction: column; /* stack child elements vertically */ 
 
    align-items: flex-end; /* align child elements to the right */ 
 
} 
 

 
dlgR {} 
 

 
.dlgDivR { 
 
    background: #E0FFFF; 
 
}

<div class="dlgR"> 
 
    <label>22:09:06</label>&nbsp; 
 
    <label>snow</label> 
 
    <label>&nbsp;accept</label> 
 
</div> 
 
<div class="dlgDivR"><span class="dlgSpan">johntakeit</span></div>