html - right - img float
¿Cómo puedo hacer un float top con CSS? (14)
Acabo de hacer con JQuery.
Probé en Firefox e IE10.
En mi problema, los artículos tienen diferentes alturas.
<!DOCTYPE html>
<html>
<head>
<style>
.item {
border: 1px solid #FF0;
width: 100px;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
function itemClicked(e) {
if (navigator.appName == ''Microsoft Internet Explorer'')
e.removeNode();
else
e.remove();
reposition();
}
function reposition() {
var px = 0;
var py = 0;
var margeY = 0;
var limitContainer = $(''#divContainer'').innerHeight();
var voltaY=false;
$(''#divContainer .item'').each(function(key, value){
var c = $(value);
if ((py+c.outerHeight()) > limitContainer) {
px+=100;
margeY-=py;
py=0;
voltaY=true;
}
c.animate({
left:px+''px'',
top:margeY+''px''
});
voltaY=false;
py+=c.outerHeight();
});
}
function addItem() {
$(''#divContainer'').append(''<div class="item" style="height: ''+Math.floor(Math.random()*3+1)*20+''px;" onclick="itemClicked(this);"></div>'');
reposition();
}
</script>
<div id="divMarge" style="height: 100px;"></div>
<div id="divContainer" style="height: 200px; border: 1px solid #F00;">
<!--div class="item"></div-->
</div>
<div style="border: 1px solid #00F;">
<input type="button" value="Add Item" onclick="addItem();" />
</div>
</body>
</html>
Sé que CSS solo admite valores izquierdos y derechos para la propiedad float, pero ¿hay alguna técnica para implementar un top flotante? Voy a intentar de explicar. Tengo el siguiente código:
<div style="float:left">
<div style="float:left">
<div style="float:left">
....
Con este código, cada div se flota a la izquierda hasta que se alcanza el límite correcto de la página. Quiero hacer lo mismo pero verticalmente, de modo que cada div se coloque en la parte inferior de la anterior y luego, cuando se alcance el límite inferior de la página, se cree una nueva columna. ¿Hay alguna manera de hacer esto usando solo CSS (y tal vez editar el código HTML)?
Aquí hay una solución que funciona (casi perfecta) en FF, Opera, Chrome:
<style>
html {height:100%}
p {page-break-inside:avoid;text-align:center;
width:128px;display:inline-block;
padding:2px;margin:2px;border:1px solid red; border-radius: 8px;}
a {display:block;text-decoration:none}
b {display:block;color:red}
body {
margin:0px;padding:1%;
height:97%; /* less than 98 b/c scroolbar */
-webkit-column-width:138px;
-moz-column-width:138px;
column-width:138px;
}
</style>
<body>
<p><b>title 1</b>
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
<a>link 4</a>
</p>
<p><b>title 2</b>
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
<a>link 4</a>
<a>link 5</a>
</p>
</body>
El truco es "page-break-inside: avoid" en P y ancho de columna en BODY. Viene con conteo dinámico de columnas. El texto en A puede ser multilínea y los bloques pueden tener diferentes alturas.
Tal vez alguien tiene algo para Edge y IE
Creo que la mejor manera de lograr lo que estás hablando es tener un conjunto de divisiones que serán tus columnas, y completarlas en la forma que describes. Luego llene esos divs verticalmente con el contenido del que está hablando.
El truco que funcionó para mí fue cambiar el modo de escritura durante la duración de la alineación div.
.outer{
/* Limit height of outer div so there has to be a line-break*/
height:100px;
/* Tell the browser we are writing chinese. This makes everything that is text
top-bottom then left to right. */
writing-mode:vertical-lr;
}
.outer > div{
/* float:left behaves like float:top because this block is beeing aligned top-bottom first
*/
float:left;
width:40px;
/* Switch back to normal writing mode. If you leave this out, everything inside the
div will also be top-bottom. */
writing-mode:horizontal-tb;
}
<div class="outer">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
Es posible que pueda hacer algo con los selectores hermanos, por ejemplo:
div + div + div + div{
float: left
}
No lo intenté pero podría flotar el 4º div dejado tal vez haciendo lo que quieres. Nuevamente no totalmente compatible.
Esto funciona, aplicar en ul :
display:flex;
flex-direction:column;
flex-wrap:wrap;
Intenté esto solo por diversión, porque a mí también me gustaría una solución.
violín: http://jsfiddle.net/4V4cD/1/
html:
<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>
css:
#container {
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}
.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}
I Puedes ver que esto funcionará con divs más altos / más anchos. Sólo tengo que pensar de lado. Imagino que el posicionamiento se convertirá en un problema. el origen de transformación debería ayudar a algunos con él.
La única forma de hacerlo con CSS es usar CSS 3, que no funcionará en todos los navegadores (solo la última generación como FF 3.5, Opera, Safari, Chrome).
De hecho, con CSS 3 existe esta impresionante propiedad: column-count que puedes usar así:
#myContent{
column-count: 2;
column-gap: 20px;
height: 350px;
}
Si # myContent está envolviendo tus otros divs.
Más información aquí: http://www.quirksmode.org/css/multicolumn.html
Como puede leer allí, existen serias limitaciones en el uso de esto. En el ejemplo anterior, solo se agregará una columna a otra si el contenido se desborda. En mozilla puede usar la propiedad de ancho de columna que le permite dividir el contenido en tantas columnas como sea necesario.
De lo contrario, tendrás que distribuir el contenido entre diferentes divs en Javascript o en el back-end.
No hay float:top , solo float:left y float:right
Si desea mostrar div debajo uno del otro tendría que hacer:
<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
Para lograr esto usando CSS3, no será tan difícil siempre y cuando te entienda apropiadamente. Digamos que el HTML DIV se ve así:
<div class="rightDIV">
<p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
<p>Some content</p>
</div>
Y el CSS sería el siguiente. Lo que el siguiente CSS hará es hacer que su DIV ejecute un flotador a la izquierda, que lo "pegará" a la izquierda del elemento Parent DIV. Luego, usa un "top: 0", y lo "pegará" a la parte superior de la ventana del navegador.
#rightDIV {
float: left
top: 0
}
#leftDIV {
float: right;
top: 0
}
Sé que esta pregunta es vieja. Pero cualquiera que quiera hacerlo hoy, aquí tienes.
div.floatablediv{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
div.floatcontainer{
-webkit-column-count: 2;
-webkit-column-gap: 1px;
-webkit-column-fill: auto;
-moz-column-count: 2;
-moz-column-gap: 1px;
-moz-column-fill: auto;
column-count: 2;
column-gap: 1px;
column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
<div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
</div>
<div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">
</div>
<div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">
</div>
<div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">
</div>
<div style="clear:both;"></div>
</div>
Simplemente use vertical-align :
.className {
display: inline-block;
vertical-align: top;
}
A Hugogi Raudel se le ocurrió una forma interesante de lograr esto mediante CSS . supongamos que aquí está nuestro marcado HTML :
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Puedes lograr una columna de 3 filas usando este código CSS :
li:nth-child(3n+2){
margin: 120px 0 0 -110px;
}
li:nth-child(3n+3) {
margin: 230px 0 0 -110px;
}
Y aquí está el resultado final:
Lo que estamos haciendo aquí es agregar un margen apropiado para cada artículo en la fila. Esta limitación de enfoque es que debe determinar el recuento de filas de columnas. no va a ser dinámico. Estoy seguro de que tiene casos de uso, así que incluí esta solución aquí.
- Aquí hay una demostración en vivo: http://codepen.io/HugoGiraudel/pen/DoAIB
- Puedes leer más sobre esto en la publicación de blog de Hugo
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}
Pero si la cantidad de elementos de div no es fija o no sabes cuánto podría ser, aún necesitas JS. use jQuery :even , :odd