0
448
VistasAlinear horizontalmente el texto de dos divs diferentes
Tengo la siguiente estructura de código html:
<link rel="stylesheet" href="test.css" /> <div class="row"> <div class="container"> <p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class="align">Should be aligned</p> </div> <div class="container"> <p class="content">Very short text</p> <p class="align">Should be aligned</p> <p>Some more text here</p> </div> </div>Aquí está mi css:
.container { display: flex; flex-direction: column; width: 40%; margin-right: 20px; } .row { display: flex; flex-direction: row; }Estoy tratando de encontrar una manera de alinear horizontalmente los dos elementos con la clase de alineación, pero no puedo resolverlo. Debo precisar que el contenido del elemento con la clase "contenido" puede ser cualquier cosa, por lo que necesito una solución que funcione en todos los casos.
(Si tiene una solución usando algún código Js, está bien)
Aquí hay una demostración de Jsfiddle.
El resultado real es este: 
Y esto es lo que quiero lograr: 
El texto debe ir donde apunta la flecha para alinearse con el texto de la izquierda, y "Algo más de texto" debe estar después del texto alineado. Espero que esté claro ahora.
Muchas gracias por tu tiempo !
3 Respuestas
Responde la pregunta0
Se ve muy bien, excepto que necesita eliminar la dirección flexible para el div .container y agregar esto en su lugar
.row { flex-flow: row nowrap; }Para los dos niños divs
.container{ display: flex; flex-direction: column; justify-content: center; }Dado que Flexbox no es compatible con IE 10 e inferior, debería considerar consultar esta demostración 👇
0
Por favor, intente esto:
.row { display: grid; grid-template-columns: 1fr 1fr; grid-template-row: auto auto auto; grid-gap: 20px; } .item2{ grid-row: 2 / 3; } .item5{ grid-row: 3 / 4; grid-column: 2 / 3; } <div class="row"> <div class="item1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="item2">Should be aligned</div> <div class="item3">Very short text</div> <div class="item4">Should be aligned</div> <div class="item5">Some more text here</div> </div>0
No puedes hacer eso con esa estructura HTML. Debe envolver los dos <p> en un <div> .
Luego use una display:grid; y grid-template-row:2fr 1fr; en .container para definir que los primeros divs consumen aproximadamente x2 el espacio de los segundos divs y se alinean correctamente.
.row { display: flex; flex-direction: row; } .container { display: grid; grid-template-rows: 2fr 1fr; width: 40%; margin-right: 20px; } <div class="row"> <div class="container"> <p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p class="align">Should be aligned</p> </div> <div class="container"> <p class="content">Very short text</p> <div> <p class="align">Should be aligned</p> <p>Some more text here</p> </div> </div> </div>