Question

我试图将我的两个块向左对齐，最后一个向右对齐，但它向下对齐。我该如何接受呢？

想法是第一行有2个div（可以是div1和div3），第二行有div 2

.container {
  width: 100%;
  border: 2px solid #ddd; 
  padding: 1em;
  text-align: left;
}

.container div:last-child {
  text-align: right;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

Answer 1

假设您想让所有三个元素都在相同行中，则需要使用inline-block将元素转换为display: inline-block元素，然后将float转换为right .container { width: 100%; border: 2px solid #ddd; padding: 1em; } .container div { display: inline-block; } .container div:last-child { float: right; }的最后一个元素：

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

width

如果您想在第一行上添加一个元素，然后在第二行上添加两个元素，则需要为每个元素提供50%中的float，第二个元素left float到right的第三个元素。您也可以选择text-align right的第三个元素。您还需要overflow容器。

这可以在下面看到：

.container {
  width: 100%;
  border: 2px solid #ddd;
  padding: 1em;
  overflow: auto;
}

.container div {
   display: block;
   width: 50%;
}

.container div:nth-of-type(2) {
  float: left;
}

.container div:last-child {
  float: right;
  text-align: right;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

如果要在第一行上包含两个元素，然后在第二行上包含一个元素，则需要为每个元素赋予width中的50%，第一个元素float left到float的第二个元素。（可选）您也可以将right的第二个元素text-align。您还需要right容器。

这可以在下面看到：

overflow

.container {
  width: 100%;
  border: 2px solid #ddd;
  padding: 1em;
  overflow: auto;
}

.container div {
   display: block;
   width: 50%;
}

.container div:nth-of-type(1) {
  float: left;
}

.container div:nth-of-type(2) {
  float: right;
  text-align: right;
}

Answer 2

.container {
  width: 100%;
  border: 2px solid #ddd; 
  padding: 1em;
  text-align: left;
}

.container div:nth-child {
  float: left;
  position: relative;
  display: inline-block;
}

.container div:last-child {
  float: right;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

Answer 3

尝试使用此CSS：

{{1}}

Answer 4

您可以在此处使用display flex。给margin-left：auto到最后一个div，会将项目向右移动，因为可用的可用空间将分配给左维度。您可以在顶部，右侧，底部或左侧等任何方向上对边距自动应用。

body{
  box-sizing:border-box;
}
.container {
  width: 100%;
  border: 2px solid #ddd; 
  padding: 1em;
  display:flex;
  flex-direction:row;
}
.container1 {
  display:flex;
  flex-direction:column;
}
.container div:last-child {
  margin-left: auto
}

<div class="container">
  <div class="container1">
    <div>Div 1</div>
    <div>Div 2</div>
  </div>
  <div>Div 3</div>
</div>

Answer 5

如果您更喜欢使用display: flex，并且发现伪元素的使用有点混乱，

<div style="display: flex; flex-wrap: wrap;">
  <div style="flex: 0 0 50%; max-width: 50%;">
    <h3 style="background: lavenderblush">Div 1</h3>
  </div>
  <div style="flex: 0 0 50%; max-width: 50%; order: 3">
    <h3 style="background: pink">Div 2</h3>
  </div>
  <div style="flex: 0 0 50%; max-width: 50%;">
    <h3 style="background: lightgoldenrodyellow">Div 3</h3>
  </div>
</div>

将三个div块对齐到另一个

5 个答案: