div中的div如何右对齐

要在HTML中的`<div>`内创建另一个嵌套的`<div>`并将其右对齐，你可以使用CSS的`float`、`text-align`、或是现代的`flexbox`或`grid`布局。这里提供几种方法：

1. **浮动（Float）**:
使用`float:right;`，假设外层`div`有一个固定的宽度，并且设置了`overflow:hidden;`来隐藏溢出内容。

<div class="parent">
  <div class="child">内容</div>
</div>

<style>
.parent {
  width: 200px; /* 设置固定宽度 */
  overflow: hidden; /* 隐藏超出部分 */
  float: left; /* 父元素左浮动 */
}

.child {
  float: right; /* 子元素右浮动 */
}
</style>

2. **绝对定位（Positioning）**:
通过设置`position:absolute;`，配合`right:0;`将子元素定位到父元素的右侧。

<div class="parent">
  <div class="child">内容</div>
</div>

<style>
.parent {
  position: relative; /* 确保父元素成为定位参照物 */
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

3. **Flexbox**:
使用`display:flex; justify-content: space-between;`，这样会平均分配空间，子元素会在两端对齐。

<div class="parent" style="display: flex; justify-content: space-between;">
  <div class="child">内容</div>
</div>

4. **Grid**:
如果你想用网格布局，可以这样设置：

<div class="parent display-grid">
  <div class="child grid-item">内容</div>
</div>

<style>
.parent {
  display: grid;
  place-items: end; /* 将子元素放置于行的末尾 */
}
</style>