divを並べて並べる

Question

3つのdivを並べて配置し、次の行に 4番目のdivを配置しようとしています。私はfloat:leftとwidth:33%を使用しました。 これを達成するために必要な他のプロパティ

https://jsfiddle.net/wdvpubau/

編集：CSS .divinline内のインラインが、レンダリングに違いはありません：同じCSSスタイルに関するもう一つ、 私は、プロパティ表示をしました。私はdisplay：blockが行全体を占めることを学びました。それはオーバーライドされていますか？

Answer 1

@Imranが正しく示唆しているように、htmlでCSSクラス名を使用する前に、.を削除する必要があります。試してみてください：

.divinline{ 
 
    display:block; 
 
    float:left; 
 
    width:33%; 
 

 
} 
 
.maindiv{ 
 
    display:block; 
 
}

<div class="maindiv"> 
 

 
    <div class="divinline"> <!-- here the class is class="divline" and not .divline --> 
 
     HI 
 
    </div> 
 
    <div class="divinline"> 
 
     HI 
 
    </div> 
 
    <div class="divinline"> 
 
     HI 
 
    </div> 
 
    <div class="divinline"> 
 
     HI 
 
    </div> 
 
</div>

ここフィドル： https://jsfiddle.net/nithin_krishnan/r0Lyydg8/

Answer 2

もう一つの方法は、単にHTMLマークアップのクラスからのすべてのドットを削除するよう

<div> 
<div style="float:left;width:100px">1</div> 
<div style="float:left;width:100px">2</div> 
<div style="float:left;width:100px">3</div> 
<div style="float:left;width:100px">4</div> 
</div>