これは、私がよく遭遇する非常に基本的な html-css クエリです。ほとんどの場合、何らかの方法で解決策を見つけますが、UI のこの予期しない動作 (私によると) の理由を知りたいと思っています。
このフィドルをご覧ください: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
私の行には多くの幅がありますが、右のフローティングテキストは次の行に移動します。理想的には、テキストは div 内の左側に float:left を、右側に float:right を並べて表示する必要があります。
これは複雑な問題ではありませんが、ここで得られない非常に一般的なものはありますか?
浮かせたアイテムを最初に置きます。フロートは互いの内部にネストされているため、互いに影響しません。要素をフローティングすると、自動的に display:block; に変更されます。
いくつかのことが起こっていると思います。ラップはであるため、ブロック整形コンテキストfloat:leftに切り替わります。問題は、テキストの後ろ (ネストされたフロートの直前) にある空白が、その後のフローに何もないため、末尾にあると見なされることです。したがって、親の幅はスペースを考慮していませんが、 html でわかるようにレイアウトがレンダリングされるときにスペースを占有します。
末尾のスペースを削除すると、X がテキストと同じ行に戻ります。
テキストの後にスペースが必要な場合は、改行なしのスペース ( ) を html に追加する必要があります。