franco g
Estoy tratando de colocar un elemento css en el lado derecho del encabezado, pero no estoy seguro de cómo hacerlo exactamente. Intenté usar:
position: Absolute; top: 20px; right 0px;
Eso funcionaría, pero si ajusta el navegador, el texto se mueve con él.
Creé un JFiddle que puedes encontrar aquí:
De esta manera se puede ver lo que estoy tratando de hacer. Tengo un texto dentro de un elemento div envuelto que dice Llamar ahora (555) 555-5555.
Aquí está el elemento de encabezado y dentro de eso tengo un elemento right_header.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Aquí está mi encabezado CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
¿Puede alguien decirme la forma correcta de lograr esto, por favor?
¡Tenga en cuenta que el lado izquierdo tendrá un logotipo allí que no se cargará en JFiddle!
¡Gracias!
Puedes fácilmente simplemente float a la derecha, no hay necesidad de relative o absolute posicionamiento.
.right_header {
color: #fff;
float: right;
}
jsfiddle actualizado – puede que tenga que añadir algunos padding/margins – como esto.
-
¡¡¡Eso lo hizo!!! Ugg, ¿por qué no pensé en eso? jajaja ¡Lo siento, debería haberlo conseguido! Ahora estoy decepcionado de haber tratado de aprender estas cosas y me lo perdí. ¡Gracias!
– franco g
9 de octubre de 2013 a las 5:05
-
Ganame, +1 😛 Lectura adicional: Esto será útil cuando flote cosas dentro de contenedores no flotantes: webtoolkit.info/css-clearfix.html
– francisco.preller
9 de octubre de 2013 a las 5:06
-
@francisco.preller Sí, eso podría ser útil. Alternativamente, aplicando
overflow:hiddenpara el padre funciona esencialmente igual que un arreglo claro, obligándolo a contener a sus hijos.–Josh Crozier
9 de octubre de 2013 a las 5:08
-
No sabía sobre el desbordamiento: oculto, agradable, gracias. Parece que hay algunas advertencias: stackoverflow.com/questions/5565668/is-clearfix-deprecated
– francisco.preller
9 de octubre de 2013 a las 5:11
-
@francisco.preller ¡ese enlace fue útil! ¡¡Gracias!!
– franco g
9 oct 2013 a las 5:18
Dos formas más de hacerlo:
- Usando márgenes en el elemento que desea colocar a la derecha de su padre.
.element {
margin-right: 0px;
margin-left: auto;
}
- Usando flexbox en el elemento padre:
.parent {
display: flex;
justify-content: right;
}
Como mencionó JoshC, usando float es una opción Sin embargo, creo que su situación sugiere otra solución.
Necesitas configurar position: relative en tu #header elemento para que el position: absolute en tu #right_header para tomar efecto. una vez que estableces eso, eres libre de posicionar #right_header como quieras en relación con #header
-
¡Gracias, eso fue de mucha ayuda! Pero el flotador puede hacerlo. ¿Hay alguna diferencia entre usar un flotador o una posición? ¿O debería decir que es mejor usar position vs float?
– franco g
9 de octubre de 2013 a las 5:14
-
@FrankG. Por lo general, evito el posicionamiento absoluto por la razón exacta que mencionaste, sin embargo, los flotadores también tienen sus desventajas. Vale la pena mencionar que los elementos absolutamente posicionados se eliminan del flujo normal.
–Josh Crozier
9 de octubre de 2013 a las 5:16
También puede hacerlo de esta manera si desea hacerlo con la posición. Intente esto, por favor.
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
La respuesta que usa flotadores de JoshC funcionará bien, sin embargo, creo que hay una razón por la que esto no funciona.
La razón por la que su código no funciona es que la posición absoluta es relativa a la que tiene dimensiones de 0x0.
El ” debe estar en una posición absoluta para que este código funcione.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
cambiarlo a…
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
Aya Ramzy Abed
<div><button>Continue</button></div>
para hacer botón a la derecha de div
<style>
button {
display:block;
margin-left:auto;
}
</style>