0
172
ViewsLos niños de div adyacentes deben estar nivelados verticalmente
Hay 3 div verticales, como se muestra en la imagen. Hay algunos div secundarios dentro de cada div que se muestran mediante rectángulos azules. Necesito que los niños div s estén nivelados verticalmente. ¿Cómo puedo hacerlo? 
·
Juan Pablo Isaza
1 answers
Answer question0
Como dijeron, en css/html puro no es posible si están en contenedores separados. Usando javascript, primero puede crear el elemento 'base' (en este caso, los divs internos de la columna central), guardar su coord y luego crear los laterales y posarlos con los coords guardados.
Este es un ejemplo aproximado, pero puede dar la idea
for (let i = 1; i < 10; i++) { //Create the center column element first, from where to get the Y pos let elem2 = document.createElement('div'); elem2.style.width = 'calc(100% - 10px)'; elem2.style.height = '50px'; elem2.style.margin = '5px'; elem2.style.background = 'lightblue'; document.querySelector('.col2').append(elem2); let coords = elem2.getBoundingClientRect(); //Getting coords data //creating first column elem let elem1 = document.createElement('div'); elem1.style.position = 'absolute'; elem1.style.top = coords.top + 'px'; //use de y pos from above elem1.style.width = 'calc(100% - 10px)'; elem1.style.height = '25px'; elem1.style.margin = '0 5px'; elem1.style.background = 'pink'; document.querySelector('.col1').append(elem1); //creating third column elem let elem3 = document.createElement('div'); elem3.style.position = 'absolute'; elem3.style.top = coords.top + 'px'; //use de y pos from above elem3.style.width = 'calc(100% - 10px)'; elem3.style.height = '25px'; elem3.style.margin = '0 5px'; elem3.style.background = 'lightgreen'; document.querySelector('.col3').append(elem3); } body, html { margin: 0; padding: 0; background: lightyellow } .container { display: flex; } .col1 { position: relative; width: 75px; border: 2px solid red } .col2 { position: relative; flex-grow: 1; border: 2px solid blue } .col3 { position: relative; width: 150px; border: 2px solid green } <div class="container"> <div class="col1"> </div> <div class="col2"> </div> <div class="col3"> </div> </div>
·
Juan Pablo Isaza
Report
Answer question