右对齐Float属性 [英] Right align out the Float Property

问题描述

< pre class =snippet-code-css lang-css prettyprint-override> .header {display：flex} .logo，.contribute，.class 1，.class 2 {display：inline-block; margin：auto 0;}

< header class =头> < div class =logo> < / DIV> < nav< / nav> < div class =参与> < / DIV> < div class =class 1> < / DIV> < div class =class 2> < / div>< / header>

.header 有 display：flex; set。

.logo ， .contributor ， .class 1 ， .class 2 具有 display：inline-block; set并且是父对象 .header class，这是flex。

我们如何确保 .class 1 和 .class 2 在不使用流属性的情况下是否对齐？

解决方案

为class1使用 margin-left：auto;

  div，nav {display：inline-block;}。header {display：flex; justify-content：space-between;}  

< header类= 报头 > < div class =left> < div class =logo> 1< / div> < NAV>< / NAV> < / DIV> < div class =contribution> 2< / div> < div class =right> < div class =class1> 3< / div> < div class =class2> 4< / div> < / div>< / header>

.header {
  display: flex
}

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

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

In this suppose .header has display: flex; set.

.logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex.

How can we make sure that the .class 1 and .class 2 are right aligned without using the flow property?

解决方案

Use margin-left: auto; for class1

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>

这篇关于右对齐Float属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！