DIV内の2段落の位置が変更される

こんにちは！レスポンシブルサイトのDIV（名前と職位）内に2つの段落を配置しようとしています。私は、画面の異なるサイズで再生を開始するたびに DIV内の2段落の位置が変更される

.header { 
 
    min-height: 56px; 
 
    transition: min-height 0.3s; 
 
    max-width: 800px; 
 
} 
 

 
.header__inner { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    float: left; 
 
    border: 3px solid #73AD21; 
 
    display: inline; 
 
} 
 

 
.header__text { 
 
    float: right; 
 
    border: 3px solid #73AD21; 
 
    display: inline; 
 
}

<header class="header"> 
 
    <div class="header"> 
 
    <div class="header__inner"> 
 
     <img class="header__logo" src="logo.jpg" alt="Logo"> 
 
    </div> 
 
    <div class="header__text"> 
 
     <p class="header__title"> 
 
     NAME 
 
     </p> 
 
     <p class="header__subtitle"> 
 
     CURRENT POSITION 
 
     </p> 
 
    </div> 
 
    </div> 
 
</header>

は、両方の段落では、ランダムに入れ替わります。どのようにして彼らが確実に秩序を保つことができるでしょうか？ページが Page with misplaced texts

を探して、これは私はあなたがその位置があなたを二つの要素のCSSを投稿していなかったようだ

what I want to do

出典

2017-12-04 user2766035

使用フレキシボックスは、それは非常に簡単にあなたの人生を行います（そして、あなたも取得：確認するにheader__subtitle十分なスペースがあるheader__title場合でも、の左側に表示されていない、あなたはこれを追加することができますフレックス注文のボーナスが追加されました。つまり、モバイルとデスクトップのdivの順番を変更するなど、きちんとしたことができます）。 – delinear

'両方のパラグラフがランダムに切り替わります。私はこれを見ない –

"私は異なるサイズの画面で再生するたびに、両方の段落がランダムに場所を切り替える"。何のサイズで遊んでいるのですか？ –

を達成したいものですか

ですスイッチしたい、header__titleとheader__subtitle。しかし、明らかに彼らは両方とも正しく浮かんでいる。代わりに、山車の

.header__subtitle { 
    clear: right; 
}

出典

2017-12-04 16:36:26 Johannes

DIV内の2段落の位置が変更される

答えて

関連する問題