0
226
ViewsColoque div al lado derecho del texto
Tengo un div con un ancho fijo. Tiene dos hijos:
- El primero que contiene texto,
- El segundo es algo así como una "insignia" (solo un div con ancho y alto fijos).
Así que quiero lograr algo como esto: -
Quiero que el segundo niño se ubique justo al lado del texto del primer niño
Intenté resolver este problema agregando display: flex al padre, pero el problema es que el primer hijo toma más ancho que su contenido (ejemplo en el fragmento a continuación)
Intenté agregar flex-basis: 0 al primer hijo, pero luego cada palabra comienza con una nueva línea, incluso si hay suficiente espacio para mostrar todo el texto en una línea.
Tal vez hay otra solución? Intenté resolver el problema usando un niño posicionado absoluto, pero también fallé.
.parent { width: 150px; background: lightblue; display: flex; align-items: center; } .first-child { outline: 1px solid red; } .first-child span { outline: 1px solid white; } .second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; } <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>3 answers
Answer question0
Solo puede usar el width como min-content; para su elemento de texto.
Por ejemplo:
width: min-content;0
¡Tal vez puedas intentar resolverlo con el código js después de documentReady!
document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'}) document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'}) .parent { width: 150px; background: lightblue; display: flex; align-items: center; } .first-child { outline: 1px solid red; } .first-child span { outline: 1px solid white; } .second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; } <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>0
Simplemente use display: inline property en el texto derecho. y use display: block en div principal.