Divは左に浮かんでいません

Question

まだ私はhtmlやCSSには比較的新しいので、これを理解することはできません。私はいくつかのテキストを持つ3つのdivを持っていて、それらは互いに隣り合っていてほしい。私はそれらを浮かべるように設定しました：残しましたが、そうしていません。

.threethings { 
 
    width: 20%; 
 
} 
 
.threethings div { 
 
    text-align: center; 
 
    position: relative; 
 
    float: left; 
 
}

<div class="threethings"> 
 
    <div><span>Style</span> 
 
    <br> 
 
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p> 
 
    </div> 
 
    <div><span>Style</span> 
 
    <br> 
 
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p> 
 
    </div> 
 
    <div><span>Style</span> 
 
    <br> 
 
    <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p> 
 
    </div> 
 
</div>

Answer 1

この

 .threethings { 
      width : 100%; 
     } 

     .threethings div { 
      width: 20%; 
      text-align: center; 
      position: relative; 
      float : left; 
     } 

はそう何が起こるしようとは、divのは、あなたの場合に浮かべているが、並んでいない側あなたはどの子どもによる親、20％の幅を与えているようですカントは横に並んでいます。

私がしたことは、親にいくつかの大きな幅と小さな幅を与えて、親が子どもたちを横に並べて配置できるようにすることでした。

と同様、divはブロックです。 width:100%は必要ないかもしれません。

Answer 2

あなたは段落を含むdivではなく、親クラスを浮かしています。 3つのネストされたdivに.threethingsクラスを追加して、進行中のdivをフロートさせるように指示します。

divを固定幅にする必要があることに注意してください。そこにある段落がHTML本文の長さを超える可能性があります。これにより改行が強制的に行われます。

Answer 3

は、このソリューションに

.threethings { 
     width:100%; 
    } 
    .threethings div { 
     width:33%; 
     position: relative; 
     float : left; 
    }