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;，它会正常工作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是你想要实现的目标吗？我添加了一个浮动右包装器并稍微更改了样式：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用flexbox布局相对简单。

将两个div的父级设为flex容器。然后使用flex属性右对齐孩子。

无需更改HTML。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何使两个div对齐？

3 个答案: