css - posicionar - alinear dos div verticalmente
¿Cómo hacer flotar 3 divs de lado a lado usando CSS? (15)
¿Pero funciona en Chrome?
Flota cada div y establece claro, tanto para la fila. No es necesario establecer anchos si no quieres. Funciona en Chrome 41, Firefox 37, IE 11
HTML
<div class="stack">
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
</div>
CSS
.stack .row {
clear:both;
}
.stack .row .col {
float:left;
border:1px solid;
}
Sé cómo hacer que 2 divs floten lado a lado, simplemente flotan uno a la izquierda y el otro a la derecha
Pero, ¿cómo hacer esto con 3 divs o debo usar tablas para este propósito?
@Leniel este método es bueno, pero necesita agregar ancho a todos los divs flotantes. Yo diría que los hacen igual ancho o asignar ancho fijo. Algo como
.content-wrapper > div { width:33.3%; }
puede asignar nombres de clase a cada div en lugar de agregar un inline style , lo que no es una buena práctica.
Asegúrese de usar un div Clearfix o clear div para evitar que los siguientes contenidos permanezcan debajo de estos div.
Puede encontrar detalles de cómo usar clearfix div here
Aquí es cómo me las arreglé para hacer algo similar a esto dentro de un elemento <footer> :
<div class="content-wrapper">
<div style="float:left">
<p>© 2012 - @DateTime.Now.Year @Localization.ClientName</p>
</div>
<div style="float:right">
<p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
</div>
<div style="text-align:center;">
<p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
</div>
</div>
CSS:
.content-wrapper
{
margin: 0 auto;
max-width: 1216px;
}
Es de la misma manera que lo hace con los dos divs, simplemente haga flotar 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>
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;
}
Intenta añadir "display: block" al estilo.
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
La forma moderna es usar el flexbox de CSS , ver 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>
También puedes usar la grilla de CSS , 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>
No vi la respuesta de arranque, por lo que vale la pena:
<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />
Deje que Bootstrap determine los porcentajes. Me gusta aclarar ambos, por si acaso.
Normalmente suelo flotar el primero a la izquierda, el segundo a la derecha. El tercero se alinea automáticamente entre ellos entonces.
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
Prefiero este método, los flotadores son poco compatibles con 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, debe incluir los divs en un contenedor y hacer un posprocesamiento 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 la cosa más asombrosa del mundo, pero al menos no se rompe en IEs anteriores.
Solo dales un ancho y float: left; , he aquí 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>
flotarlas todas a la izquierda
asegúrese de especificar un ancho para que todos puedan caber en su contenedor (ya sea otro div o la ventana), de lo contrario se ajustarán
puedes flotar: a la izquierda para todos ellos y establece el ancho a 33.333%
<br style="clear: left;" />
Ese código que alguien publicó allí hizo el truco. cuando lo pego justo antes de cerrar el DIV del contenedor, ayuda a que todos los DIV posteriores se superpongan con los DIV que he creado lado a lado en la parte superior.
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa !! :)
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
la ventaja de esta manera es que puede establecer el ancho de cada columna independientemente de la otra siempre que lo mantenga por debajo del 100%, si utiliza 3 x 30%, el 10% restante se divide como un espacio divisor del 5% entre las columnas.