So drucken Sie Daten von links nach rechts in HTML mit CSS

Question

Es ist eine sehr grundlegende Frage von CSS, aber da ich neu in CSS bin, kann ich es nicht tun. Ich habe eine html wie

<div> 
    DATA1 
    </div> 

    <div> 
    DATA2 
    </div> 


    <div> 
    DATA3 
    </div> 

    <div> 
    DATA4 
    </div> 

standardmäßig wie folgt ausdrucken in Browser

DATA1 
DATA2 
DATA3 
DATA4 

, aber ich will es nach rechts, um in links zu drucken.

DATA1  DATA2  DATA3  DATA4 

Answer 1

Sie können float verwenden.

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

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

oder Sie display:inline-block;

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

<div> 
 
    DATA1 
 
</div> 
 

 
<div> 
 
    DATA2 
 
</div> 
 

 

 
<div> 
 
    DATA3 
 
</div> 
 

 
<div> 
 
    DATA4 
 
</div>

und Sie können auch flex verwenden können.

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

Ich bin nur einen anderen Weg gehen hinzuzufügen, dies zu tun, die von @mmativ geschrieben Methoden sind vollkommen gültig. Der andere Weg ist Tabelle und Tischzelle.

Ich fügte eine Hauptklasse data hinzu und gab es display:table. Die cell Klasse wurde display:table-cell gegeben

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>