Cómo hacer que un div se mueva en la página HTML y no pase al siguiente nivel

Tengo divs creados en una fila y ahora, cuando los hago zoom, los siguientes divs se mueven hacia abajo en la página. No quiero que pasen al siguiente nivel, sino que quiero que el ancho de HTML aumente y que permanezcan en el mismo nivel. Encontré un jsfiddle para algo que creé para mis prácticas. Si hace clic en la imagen, se amplían y después de algunos zooms, la imagen del lado derecho se mueve hacia abajo al siguiente nivel. Para mí, esto no debería pasar. ¿Como hacer esto?

El enlace a jsFiddle es: http://jsfiddle.net/bq6Ju/14/ El siguiente código está escrito por uno de los estudiosos de desbordamiento de pila, y esto es algo que tengo similar en mi aplicación de prueba

              .flower {
display: block;
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid red;
}

.flower img {
width: 100%;
height: 100%;
}
.flower div {
width: 200px;
height: 200px;
position: relative;
}

.chunk2 div {
left: -100px;
}
.chunk3 div {
top: -100px;
}
.chunk4 div {
top: -100px;
left: -100px;
}

El código HTML es

El código Javascript/Jquery es 

$('div.flower').click(function(){

var resize = 1.30;

var $this = $(this);
var $inner = $this.find('div');

$this.animate({          
    'width': $this.width() * resize,
    'height': $this.width() * resize,   
});

var p = {
    top: parseInt($inner.css('top')),
    left: parseInt($inner.css('left'))
}
console.log(p);
$inner.animate({
    'width': $inner.width() * resize,
    'height': $inner.width() * resize,
    'top': p.top*resize,
    'left': p.left*resize,        
});   

});

preguntado el 25 de agosto de 12 a las 00:08

¿Qué quieres que pase con ellos? -

Si el diseño de su sitio web se rompe porque el usuario hace zoom en la página, es culpa de ellos, no suya. Si el usuario necesita hacer zoom en la página para leer/ver contenido, es culpa tuya, no de ellos. -

@barlasapaydin: hay un enlace de violín arriba. Vuelvo a pegar el enlace jsfiddle.net/bq6Ju/14 -

@unix_user Por favor, añádelo también código aquí mismo en SO. De esta manera, su pregunta seguirá siendo válida incluso si el enlace se cae por cualquier motivo. -

@PeeHaa: suponga que todas las imágenes están en el nivel 1. Cuando hace clic en la imagen, la imagen del lado derecho se mueve hacia abajo y irá al nivel 2. Lo que quiero es que la imagen no se mueva hacia abajo, sino la página HTML debería continuar expandiéndose o el ancho debería aumentar y todas las imágenes deberían estar en el nivel 1 -

3 Respuestas

Puede agregar un contenedor alrededor de las imágenes y evitar envolver y agregar barras de desplazamiento mediante la propiedad de desbordamiento:

.container { overflow: auto; white-space: nowrap; }

No es que para que esto funcione haya eliminado el float, porque eso te impide AFAIK hacer lo que quieres. Y he cambiado el display propiedad a inline-block. También he añadido el vertical-align propiedad para asegurarse de que las imágenes siempre estén alineadas en la parte superior.

.flower {
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    vertical-align: top;
}

Puedes ver la demostración aquí: http://jsfiddle.net/bq6Ju/18/

Respondido 25 ago 12, 00:08

¡Gracias! Su respuesta es lo que debo hacer, pero no quiero eliminar el flotador de css ya que tengo más de 100 divs y necesito que se coloquen en una estructura similar a una cuadrícula. ¿Algún otro enfoque, en el que la cuadrícula como str también esté presente y los divs tampoco pasen al siguiente nivel? - usuario_unix

No lo haria inline-block ¿Aún produce la cuadrícula que busca? - PeeHaa

no, no lo hace. Si elimino el flotador: a la izquierda, la cuadrícula desaparece y el div se superpone. - usuario_unix

Agregar un contenedor flotante con nowrap también funciona

http://jsfiddle.net/bq6Ju/19/

.container {
    float: left;
    white-space: nowrap;
}

Respondido 25 ago 12, 01:08

:Esto ya está hecho. Necesito que las imágenes no se muevan hacia abajo, es decir, la barra de desplazamiento horizontal debería bajar. - usuario_unix

Funciona para mí en Chrome, es decir, las imágenes siguen moviéndose hacia la derecha, aunque parece romperse en IE8 y las imágenes se mueven hacia abajo. - Tieran

está bien. Probé en firefox y no me funciona en eso. ¿Alguna idea de cómo hacer esto en ff? - usuario_unix

Demostración: http://jsfiddle.net/bq6Ju/26/

HTML:

<div class="row">
<div class="row_wrapper">
  <div class="flower chunk1">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk2">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk3">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk4">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>

  <div style="clear: both;"></div>
</div>
</div>

<!-- and here more rows -->

CSS:

.row {
  overflow-x: scroll;
}

.row_wrapper {
  width: 500px; /* initial width */
}

/* other your css */

JavaScript

// in click handler

var total_width = 0;
var cur_outer = $(this).outerWidth(true) - $(this).width();
var cur_inner = resize * $(this).width();
var total_width = cur_outer + cur_inner;

$(this).parent().children('.flower').not(this).each(function () {
  total_width += $(this).outerWidth(true);
});

$(this).parent().width(total_width + 10);

Respondido 25 ago 12, 06:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.