cssを使用してhtmlの左から右にデータを印刷するには

Question

それはCSSの非常に基本的な質問ですが、私はCSSには新しいので、できません。 は、私はそれがブラウザ

DATA1 
DATA2 
DATA3 
DATA4 

に、このように印刷し、デフォルトで

<div> 
    DATA1 
    </div> 

    <div> 
    DATA2 
    </div> 


    <div> 
    DATA3 
    </div> 

    <div> 
    DATA4 
    </div> 

のようなHTMLを持っていますが、私は左から右の順にして、それを印刷したいです。

DATA1  DATA2  DATA3  DATA4 

Answer 1

floatを使用できます。

div{ 
 
    float:left; 
 
    margin-right:5px; 
 
}

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

か、 display:inline-block;

div{ 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
    
 
}

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

を使用することができますし、またflexを使用することができます。私はこれを行うための別の方法を追加するつもりだ

div { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
div>div{ 
 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
}

<div> 
 
    <div> 
 
    DATA1 
 
    </div> 
 

 
    <div> 
 
    DATA2 
 
    </div> 
 

 

 
    <div> 
 
    DATA3 
 
    </div> 
 

 
    <div> 
 
    DATA4 
 
    </div> 
 
</div>

Answer 2

は、@mmativによって投稿方法は完全に有効です。他の方法は、テーブルとテーブルセルを使用しています。

メインクラスdataを追加し、display:tableとしました。 cellクラスはdisplay:table-cell

HTML & CSS与えられた

.data{ 
 
    display:table; 
 
} 
 

 
.cell{ 
 
    display:table-cell; 
 
    padding-left:10px; 
 
}

<div class="data"> 
 

 
    <div class="cell"> 
 
    DATA1 
 
    </div> 
 

 
    <div class="cell"> 
 
    DATA2 
 
    </div> 
 

 

 
    <div class="cell"> 
 
    DATA3 
 
    </div> 
 

 
    <div class="cell"> 
 
    DATA4 
 
    </div> 
 
    
 
    
 
</div>