Question

＆＃13;

.header {
  display: flex
}

.logo,
.contribute,
.class 1,
.class 2 {
  display: inline-block;
  margin: auto 0;
}

＆＃13;

<header class="header">
  <div class="logo">
  </div>
  <nav </nav>
    <div class="contribute">
    </div>
    <div class="class 1">
    </div>
    <div class="class 2">
    </div>
</header>

＆＃13;

在此假设.header设置了display: flex;。

.logo，.contributor，.class 1，.class 2已设置display: inline-block;并且是父级.header类的子级，即flex。< / p>

如何在不使用flow属性的情况下确保.class 1和.class 2正确对齐？

Answer 1

对class1

使用margin-left: auto;

div,
nav {
  display: inline-block;
}

.header {
  display: flex;
  justify-content: space-between;
}

<header class="header">
  <div class="left">
    <div class="logo">1</div>
    <nav></nav>
  </div>
  <div class="contribute">2</div>
  <div class="right">
    <div class="class1">3</div>
    <div class="class2">4</div>
  </div>
</header>

Answer 2

只需将margin-left: auto;添加到.class1即可自行推送，.class2推向右侧

我修改了您的班级名称，因为CSS并不满足于只有一位数的班级名称，例如1中的class 1，所以要么删除空格（我在下面的示例中做了）或添加ie nr（nr1）。此外，由于Flex容器中的项目是弹性项目，display: inline-block将无效。

＆＃13;

.header {
  display: flex
}

.class1 {
  margin-left: auto;
}

＆＃13;

<header class="header">
  <div class="logo">
  logo
  </div>
  <nav>
  </nav>
  <div class="contribute">contribute
  </div>
  <div class="class1">class 1
  </div>
  <div class="class2">class 2
  </div>
</header>

＆＃13;

右对齐浮动属性

2 个答案: