0
142
VisualizaçõesProblema de posicionamiento simple para elemento hijo
Digamos que tengo este bucle for para crear HTML.
let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8]" } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> <button class='buttons'>ADD</button> </div>` } body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); } .whole { width: 200px; } .buttons { position: relative; top: 10px; left: 200px }Todo esto funciona bien, pero quiero que la posición del botón siempre mantenga la misma posición (verticalmente) con los otros botones.
Ahora, en mi código, la altura del botón se verá afectada por la longitud y otros elementos secundarios ( p ). Intento usar position:absolute o position:sticky , pero ninguno de los dos resuelve mi problema.
¿Hay alguna manera de hacer que la posición del elemento secundario sea absoluta para el único elemento secundario?
El efecto que quiero lograr es que todos los botones siempre puedan tener la misma posición vertical con los demás.
2 Respostas
Responde à pergunta0
Si lo que desea lograr es que los botones estén alineados verticalmente en la misma línea, simplemente puede usar CSS flexbox en .whole . Al forzar la dirección flexible a la column y luego forzar la inserción de espacios entre sus elementos secundarios a través justify-content: space-between , puede lograr prácticamente lo que desea:
let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8]" } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> </div>` } body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); } .whole { width: 200px; display: flex; flex-direction: column; justify-content: space-between; } .buttons { position: relative; width: min-content; left: 100%; }0
Esta es una solución usando una grilla. Convierta todo en un elemento de cuadrícula y luego use place-self y grid-row-start para colocar los botones al final; Puedes aprender el funcionamiento completo de grid aquí en CSS tricks.
let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] Stack Overflow is a question and answer website for professional and enthusiast programmers." } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> <button class='buttons'>ADD</button> </div>` } body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); } .whole { display: grid; width: 200px; column-gap: 5px; } .buttons { position: relative; grid-row-start: 2; height: 20px; place-self: end; }