2つのdivを正しく整列させる方法は？

Question

私のプロジェクトには2つのdivがあります（dlgRとdlgDivR）。

dlgRの内容は最初の行に表示し、dlgDivRの内容は2番目の行に示す必要があります。ここで私が何をしたいです：

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

が必要なのは、それをclear: right;を与えるあなた.dlgDivR

にフロートをクリアすることであり、それが正常に動作します

.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

レイアウトがフレキシボックスと比較的簡単です。

両方のdivの親をフレックスコンテナにします。その後、flexプロパティを使用して子を右揃えにします。

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>