floatを使用せずにdivの反対側にスパンを配置する

Question

divの内側にスパンがあります。私は、左側にいくつかの文字列を含む1つのスパンと、右側に素晴らしいフォントを含む1つのスパンを希望します。しかし、私は浮動小数点を使用することはできません。これらの要素は重く入れ子になっており、問題を引き起こします。また、幅が有限であることに注意してください。また、文字列が十分に長い場合は、単語区切りが可能です。

<div> 
<span>Some Long Text Here</span> 
<span><i class="fa fa-bars"></i></span> 
</div> 

Answer 1

それはオプションの使用flexboxある場合：あなたがスペースを確保したい場合は、（フロートが台無しに「重くネストしていないでしょうフレキシボックスまたはfloatを使用することができます

div { 
 
    line-height: 20px; 
 
    padding: 15px; 
 
    color: white; 
 
    background: purple; 
 
    /*Code flex*/ 
 
    display: flex; 
 
} 
 

 
span:first-child { 
 
    flex:1 1 auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> 
 
<div> 
 
    <span>Some Long Text Here</span> 
 
    <span><i class="fa fa-bars"></i></span> 
 
</div><br> 
 
<div> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam, iusto laboriosam ipsam quas impedit voluptatem fugiat rerum quis, minima velit nam accusantium beatae voluptas commodi eligendi molestiae dolorum reiciendis!</span> 
 
    <span><i class="fa fa-home"></i></span> 
 
</div>