span - Divisiones flotantes de CSS en alturas variables
css variables color (10)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo crear una vista de cuadrícula / mosaico? 8 respuestas
Tengo infinitas divisiones de un ancho de 100 píxeles, que pueden caber en un elemento principal de 250 píxeles de ancho. Independientemente de la altura, necesito que los divs se muestren en filas, como se muestra en la imagen. Intenté resolver esto, pero la altura del div parece estar arruinándolo.
Realmente apreciaría tu ayuda. Gracias :)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
Aquí está el jsfiddle
Esto es lo que hice y logré usando javascript https://jsfiddle.net/8o0nwft9/
Como se ha señalado con razón, esto es imposible con CSS solo ... afortunadamente, ahora he encontrado una solución en http://isotope.metafizzy.co/
Parece resolver el problema completamente.
Con un poco de ayuda de este comentario ( flotación de Bloque CSS a la izquierda ) descubrí la respuesta.
En cada "fila" que hago, agrego un nombre de clase a la left .
En cada otra "fila" que hago, agrego un nombre de clase right .
¡Entonces floto a la izquierda y floto a la derecha para cada uno de estos nombres de clase!
La única complicación es que mi orden de contenido se invierte en las filas "correctas", pero eso se puede resolver usando PHP.
Gracias por su ayuda amigos!
#holder{
width:200px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
float:right;
}
.four{
background-color:#FF0;
float:right;
}
.left{float:left;}
.right{float:right;}
<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box four right">4</div>
<div class="box three right">3</div>
</div>
</body>
En los navegadores modernos, simplemente puede hacer:
display: inline-block;
vertical-align: top;
Gracias a thirtydot, me di cuenta de que mi respuesta anterior no resolvió el problema adecuadamente. Aquí está mi segundo intento, que utiliza JQuery ya que una solución única de CSS parece imposible:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var numberOfColumns = 3;
var numberOfColumnsPlusOne = numberOfColumns+1;
var marginBottom = 10; //Top and bottom margins added
var kids = $(''#holder:first-child'').children();
var add;
$.each(kids, function(key, value) {
add = numberOfColumnsPlusOne+key;
if (add <= kids.length){
$(''#holder:first-child :nth-child(''+(numberOfColumnsPlusOne+key)+'')'').offset({ top: $(''#holder:first-child :nth-child(''+(key+1)+'')'').offset().top+$(''#holder:first-child :nth-child(''+(key+1)+'')'').height()+marginBottom });
}
});
});
</script>
<style>
#holder{
width:270px;
border:1px dotted blue;
display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
}
.box{
width:80px;
height:150px;
background-color:#CCC;
margin:5px;
text-align:center;
font-size:45px;
}
.one{
height:86px;
}
.two{
height:130px;
}
.three{
height:60px;
}
.four{
clear:both;
height:107px;
}
.five{
height:89px;
}
.six{
height:89px;
}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box three left">3</div>
<div class="box four left">4</div>
<div class="box five left">5</div>
<div class="box six left">6</div>
</div>
</body>
</body>
El único problema que queda para mi solución es qué sucede cuando una caja tiene dos cajas de ancho en lugar de una sola. Todavía estoy trabajando en esta solución. Publicaré cuando esté completo.
Proporciono esta respuesta porque incluso cuando hay buenos que proporcionan una solución ( usando mampostería ) todavía no está claro el por qué no es posible lograr esto mediante el uso de flotadores.
(Esto es importante - # 1 ).
Un elemento flotante se moverá lo más hacia la izquierda o derecha que pueda en la posición donde estaba originalmente
Así que ponlo de esta manera:
Tenemos 2 div
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-blue{
width:100px;
height:100px;
background: blue;
}
.div-red{
width:50px;
height:50px;
background: red;
}
sin float serán uno debajo del otro
Si div5 float: right div5 , div6 se posiciona en la línea donde estaba div5 ,
/*the lines are just for illustrate*/
Entonces, si ahora div6 float: left div6 , nos moveremos lo más a la izquierda que podamos, " en esta línea " (ver # 1 arriba), entonces si div5 cambia su línea, div6 seguirá.
Ahora agreguemos otro div en la ecuación
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-gree{
width:150px;
height:150px;
background: green;
float:right;
}
Tenemos esto
Si establecemos clear: right a div5 , lo estamos forzando a tomar la línea abajo div4
y div6 flotarán en esta nueva línea hacia la derecha o hacia la izquierda.
Ahora usemos como ejemplo la pregunta que me trajo aquí debido a una duplicación de la pila div forcing de izquierda a derecha
Aquí el fragmento para probarlo:
div{
width:24%;
margin-right: 1%;
float: left;
margin-top:5px;
color: #fff;
font-size: 24px;
text-align: center;
}
.one{
background-color:red;
height: 50px;
}
.two{
background-color:green;
height:40px;
}
.three{
background-color:orange;
height:55px;
}
.four{
background-color:magenta;
height:25px;
}
.five{
background-color:black;
height:55px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>
En la imagen de arriba se puede ver cómo div.5 está almacenado justo al lado de div.3 que es porque en su línea (definida por el recuadro de línea de div.4 ) es lo más lejos que puede llegar, div.1* , div.2* , etc, también flotan a la izquierda de div.5 pero como no encajan en esa línea van a la línea de abajo (definida por el recuadro de línea de div.5 )
Ahora note que cuando reducimos la altura de div.2* suficiente como para ser menor que div.4* cómo deja pasar a div.5* :
Espero que esto ayude a aclarar por qué esto no se puede lograr usando flotadores. Solo aclaro el uso de flotadores (no en bloque en línea) debido al título " CSS Divisiones flotantes en alturas variables " y porque ahora mismo la respuesta es bastante larga.
Puede que esta no sea la solución exacta para todos, pero creo que (literalmente) pensar fuera de la caja funciona para muchos casos: en lugar de mostrar los cuadros de izquierda a derecha, en muchos casos puede llenar primero la columna de la izquierda, ir al centro, llenarlo con cuadros y finalmente llenar la columna derecha con cuadros. Tu imagen sería entonces:
Si está utilizando un lenguaje de scripting como php, también puede completar las columnas de izquierda a derecha agregando un nuevo cuadro y enviando cuando se llenen todas las columnas. ej. (código php no probado):
$col1 = ''<div class="col1"> <div>box1</div>'';
$col2 = ''<div class="col2"> <div>box2</div>'';
$col3 = ''<div class="col3"> <div>box3</div>'';
$col1 .= ''<div>box4</div> </div>''; //last </div> closes the col1 div
$col2 .= ''<div>box5</div> </div>'';
$col3 .= ''<div>box6</div> </div>'';
echo $col1.$col2.$col3;
$ col1, $ col2 y $ col3 pueden tener float: left y width: 33%, establece los recuadros dentro de div a full width y no float.
Obviamente, si está utilizando javascript / jquery para cargar los cuadros de forma dinámica, es mejor que los diseñe también de esta manera, como se explica en otras respuestas a este hilo.
Que yo sepa, no hay forma de solucionar este problema con CSS puro (que funciona en todos los navegadores comunes):
- Los flotadores no funcionan .
-
display: inline-blockno funciona . -
position: relativecon laposition: absoluterequiere ajuste manual de píxeles . Si está utilizando un lenguaje del lado del servidor y está trabajando con imágenes (o algo con una altura predecible), puede manejar el ajuste de píxeles "automáticamente" con el código del lado del servidor.
En su lugar, use jQuery Masonry .
Si alguien todavía está buscando alternativas, aquí hay una. Intente utilizar la propiedad de ancho de columna (-moz - / - webkit-). Se ocupa del problema de altura variable de div. Sin embargo, el ancho de columna agrega un nuevo div al final de la columna.
De lo contrario, jQuery Masonry funciona mejor.
para mostrar simplemente coloque este CSS en su div y luego tendrá el diseño deseado. no es necesario ningún complemento o JS.
.Your_Outer {
background-color: #FFF;
border: 1px solid #aaaaaa;
float: none;
display:inline-block;
vertical-align:top;
margin-left: 5px;
margin-bottom: 5px;
min-width: 152.5px;
max-width: 152.5px;
}
puedes editar el código según tus requisitos :)
suponiendo que sus necesidades se parecen más a su código de ejemplo coloreado, entonces:
.box:nth-child(odd){
clear:both;
}
si va a ser 3 filas, nth-child(3n+1)