Tengo varios divs con la regla css 'cambiar tamaño: ambos' en todos ellos. El problema es que cuando empiezo a redimensionar alguno de ellos los demás se mueven automáticamente. ¿Es posible cambiar ese comportamiento?
Intenté 'posición: absoluta' pero no es una solución, porque recopila todos los divs en un solo lugar. También se podrán arrastrar como notas, por lo que no puedo pegarlas en las esquinas.
El div redimensionable debe cambiar su tamaño sobre los demás (con un índice z más alto o algo así). Otros deben permanecer en sus posiciones mientras cambia el tamaño y después
código: https://jsfiddle.net/q3m5ya8f/
.el { resize: both; overflow-y: auto; border: 2px solid black; margin: 10px; height: 100px; width: 100px; } .container { display: flex; flex-direction: row; } <div class="container"> <div class="el"> 1 </div> <div class="el"> 2 </div> </div> <div class="el"> 3 </div>Intente usar la cuadrícula como a continuación:
.el { resize: both; overflow-y: auto; border: 2px solid black; } .container { display: grid; /* the width / height here */ grid-template-columns:100px 100px; grid-auto-rows:100px; gap: 10px; } <div class="container"> <div class="el"> 1 </div> <div class="el"> 2 </div> <div class="el"> 3 </div> </div>Bueno, puede lograr esto por position:absolute y colocar cada div usando las propiedades left/right/top/bottom separado, como se hizo en el siguiente fragmento (la posición puede ser la deseada que he tomado, por ejemplo):
.el { resize: both; overflow-y: auto; border: 2px solid black; margin: 10px; height: 100px; width: 100px; position: absolute } .el1 { left: 0 } .el2 { right: 0 } .el3 { bottom: 0 } .container { display: flex; flex-direction: row; } <div class="container"> <div class="el el1"> 1 </div> <div class="el el2"> 2 </div> </div> <div class="el el3"> 3 </div>Puede agregar un wrapper-div y darle width y height fijos:
.el{ resize: both; overflow-y: auto; border: 2px solid black; margin: 10px; height: 100px; width: 100px; } .container{ display: flex; flex-direction: row; } .wrapper-div{ margin: 10px; width:100px; height:100px; } <div class="container"> <div class="wrapper-div"> <div class="el"> 1 </div> </div> <div class="wrapper-div"> <div class="el"> 2 </div> </div> </div> <div class="wrapper-div"> <div class="el"> 3 </div> </div>