別の角度の角を得ることができません

Question

簡単な質問ですが、おそらくは難しい答えです。私は複数のコンポーネントを持つAngular 5アプリをやっています。右...

ChartPickerの両方が非常に簡単です

<div> 
    <span> 
     <select [(ngModel)]="config.granularity.selected"> 
     <option [selected]="false" *ngFor="let option of config.granularity.available" [ngValue]="option"> 
      <span class="option-txt"> {{option}} </span> 
     </option> 
     </select> 
    </span> 
</div> 

<div> 
    <span> 
    <div class="btn-group btn-group-small" *ngIf="available_charts.chart_types.length > 1"> 
     <label *ngFor="let type_key of available_charts.chart_types" class="btn btn-default active" [class]="type_key.name == available_charts.chart_types.selected ? 'active' : ''" (click)="available_charts.selected = type_key.name"> 
      <i class="fa fa-bar-chart" aria-hidden="true"></i> 
     </label> 
    </div> 
    </span> 
</div> 

GranularityPicker：これらは、それらの2つですか？まあ、私は、ページの左側に配置されている別のコンポーネントと呼ばれるセグメントと、このようなアプリでそれらを置く：

<segments [config]="config"></segments> 
<chart-picker [config]="config" class="chart-picker"></chart-picker> 
<granularity [config]="config" class="granularity-picker"></granularity> 

チャート-ピッカーは粒度の前で、両方のクラスのCSSは、余裕を持っています右側にはフロート、右側にはフロートがあります。

...チャートピッカー、最初にあるべきもの、の最後に、の右側に表示されます。

これは絶対に意味がありません。 CSSを変更しようとするのは問題ではありません。うまくいきません。どのようにこれを修正するための任意のアイデア？

Answer 1

両方の要素がfloat:rightです。浮動小数点数はドキュメント順に計算されるため、最初の要素は右端まで浮動し、2番目の要素は最初の要素の隣に浮動し、「間違った」順序で残ります。おそらく、ここでは浮動ではなく、インラインまたはインラインブロックの要素を使用したいと思うでしょう。

.r {float:right}

<div class="r">First</div> 
 
<div class="r">Second</div>