父元素有三个div子元素，我希望前2个是正常左对齐，第三个是右对齐，并且占用文档流该怎么做

可以给父元素设置`display: flex`属性，来让父元素的子元素排列成一行，并且占用文档流。然后给第三个子元素设置`margin-left: auto`，来让它靠右对齐。

示例代码如下：

HTML:

<div class="container">
  <div class="content">
    <!-- 内容1 -->
  </div>
  <div class="content">
    <!-- 内容2 -->
  </div>
  <div class="content align-right">
    <!-- 内容3 -->
  </div>
</div>

CSS:

.container {
  display: flex;
}

.content {
  /* 其他样式 */
}

.content.align-right {
  margin-left: auto;
}

这样，`content`元素就会被排列成一行，前2个元素左对齐，第三个元素靠右对齐，并且它们仍然占用文档流。

相关问题

float:right是不占用文档流了，会覆盖在别的元素上，如果我希望右对齐的div可以占用文档流该怎么做

如果希望右对齐的`div`元素可以占用文档流，可以使用CSS的`display: flex`和`justify-content: flex-end`属性来实现。这样设置之后，`div`元素就会靠右对齐，并且不会覆盖在其他元素上。

示例代码如下：

HTML:

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

CSS:

.container {
  display: flex;
  justify-content: flex-end;
}

.content {
  /* 其他样式 */
}

这样，`content`元素就会被右对齐，并且它的父元素`container`仍然占据文档流。

css如何让两个div并排并且一个 左对齐一个右对齐

可以使用CSS的float属性和text-align属性来实现两个div并排并且一个左对齐一个右对齐。具体实现方法如下：

HTML代码：

<div class="container">
  <div class="left">左边的div</div>
  <div class="right">右边的div</div>
</div>

CSS代码：

.container {
  width: 100%;
  overflow: hidden;
}

.left {
  float: left;
  width: 50%;
  text-align: left;
}

.right {
  float: right;
  width: 50%;
  text-align: right;
}

解释一下CSS代码的实现方法：

首先，我们使用一个容器元素来包含两个需要并排显示的div元素。

然后，我们使用float属性将左边的div元素向左浮动，使用float属性将右边的div元素向右浮动。

接着，我们使用width属性将两个div元素的宽度设置为50%。

最后，我们使用text-align属性将左边的div元素文字对齐方式设置为左对齐，将右边的div元素文字对齐方式设置为右对齐。

这样就可以实现两个div并排并且一个左对齐一个右对齐的效果了。