¿Cómo hacer flotar 3 divs uno al lado del otro usando CSS?
Sé cómo hacer que 2 divs floten uno al lado del otro, simplemente flote uno hacia la izquierda y el otro hacia la derecha.
¿Pero cómo hacer esto con 3 divs o debería simplemente usar tablas para este propósito?
Aceptado
Simplemente dales un ancho y float: left;aquí tienes un ejemplo:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
La forma moderna es utilizar CSS flexbox , consulte las tablas de soporte .
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>Expandir fragmento
También puedes usar CSS grid , ver tablas de soporte .
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>Expandir fragmento
Es lo mismo que lo haces con los dos divs, simplemente flota el tercero hacia la izquierda o hacia la derecha también.
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
flotarlos a todos a la izquierda
asegúrese de que se especifique un ancho que todos puedan caber en su contenedor (ya sea otro div o la ventana), de lo contrario se ajustarán
