Cómo flotar 3 divs uno al lado del otro usando CSS?

Sé cómo hacer flotar 2 divs uno al lado del otro, simplemente flote uno a la izquierda y el otro a la derecha.

¿Pero cómo hacer esto con 3 divs o debería usar tablas para este propósito?

Simplemente dales ancho y float: left; , he aquí un ejemplo:

 
Left Stuff
Middle Stuff
Right Stuff

La forma moderna es usar CSS flexbox , ver tablas de soporte .

 .container { display: flex; } .container > div { flex: 1; /*grow*/ } 
 
Left div
Middle div
Right div

Es lo mismo que haces con los dos divs, solo flotas el tercero hacia la izquierda o hacia la derecha también.

  
...
...
...

flotarlos a todos a la izquierda

asegúrese de especificar un ancho que todos puedan caber en su contenedor (ya sea otro div o la ventana); de lo contrario, se ajustarán

 

ese código que alguien publicó allí, ¡lo hizo! cuando lo pego justo antes de cerrar el Container DIV, ayuda a borrar todos los DIV subsiguientes de la superposición con los DIVs que he creado uno al lado del otro en la parte superior.

 
... ...

tadaa !! 🙂

Flota los tres divs a la izquierda. Como aquí:

 .first-div { width:370px; height:150px; float:left; background-color:pink; } .second-div { width:370px; height:150px; float:left; background-color:blue; } .third-div { width:370px; height:150px; float:left; background-color:purple; } 

Normalmente solo floto el primero a la izquierda, el segundo a la derecha. El tercero se alinea automáticamente entre ellos entonces.

 
Column 1
Column 3
Column 2
  
THIS IS COLUMN 1 LEFT
THIS IS COLUMN 3 RIGHT
THIS IS COLUMN 2 CENTER

la ventaja de esta forma es que puede establecer el ancho de cada columna independientemente de la otra, siempre que la mantenga por debajo del 100%, si usa 3 x 30%, el 10% restante se divide como un 5% de espacio divisor entre las columnas

puede flotar: izquierda para todos y establecer el ancho a 33.333%

intenta agregar “display: block” al estilo

  
...
...
...

Prefiero este método, las flotantes son mal compatibles en versiones anteriores de IE (¿en serio? …)

 .column-left{ position:absolute; left: 0px; width: 33.3%; background: red; } .column-right{position:absolute; left:66.6%; width: 33.3%; background: green; } .column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; } 

ACTUALIZADO: Por supuesto, para usar esta técnica y debido al posicionamiento absoluto, necesitas encerrar los divs en un contenedor y hacer un postprocesamiento para definir la altura de if, algo como esto:

 jQuery(document).ready(function(){ jQuery('.main').height( Math.max ( jQuery('.column-left').height(), jQuery('.column‌​-right').height(), jQuery('.column-center').height()) ); }); 

No es lo más asombroso del mundo, pero al menos no se rompe en IE más antiguas.

No vi la respuesta de bootstrap, así que por lo que vale:

 
Left Div
Middle Div
Right Div

deja que Bootstrap descubra los porcentajes. Me gusta borrar ambos, por las dudas.

¿Pero funciona en Chrome?

Flote cada div y establezca clear, ambos para la fila. No es necesario establecer anchos si no lo desea. Funciona en Chrome 41, Firefox 37, IE 11

Haga clic para JS Fiddle

HTML

 
One
Two
One
Two
Three

CSS

 .stack .row { clear:both; } .stack .row .col { float:left; border:1px solid; } 

Así es como logré hacer algo similar a esto dentro de un elemento

:

 

© 2012 - @DateTime.Now.Year @Localization.ClientName

@Localization.DevelopedBy Leniel Macaferi

☎ (24) 3347-3110 | (24) 8119-1085     ✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)

CSS:

 .content-wrapper { margin: 0 auto; max-width: 1216px; } 

@Leniel este método es bueno, pero debe agregar ancho a todos los div flotantes. Yo diría que sean iguales o que asignen ancho fijo. Algo como

 .content-wrapper > div { width:33.3%; } 

Puede asignar nombres de clase a cada div en lugar de agregar inline style , lo cual no es una buena práctica.

Asegúrese de utilizar un div de clearfix o un div claro para evitar que el siguiente contenido permanezca debajo de estos div.

Puede encontrar detalles sobre cómo usar clearfix div aquí