jquery - 如何让两个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 上的 float 即可

给它 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>