Placer un Élément sur le côté droit avec les CSS
Je suis en train de placer une feuille css de l'élément à droite de l'en-tête mais vous ne savez pas exactement comment le faire. J'ai essayé d'utiliser:
position: Absolute; top: 20px; right 0px;
Qui pourrait fonctionner, mais si vous ajustez le navigateur, le texte se déplace avec elle.
J'ai créé un JFiddle que vous pouvez trouver ici:
De cette façon, vous pouvez voir ce que je suis en train de faire. J'ai un texte à l'intérieur d'un enveloppé élément div qui dit Appeler (555) 555-5555.
Ici est l'élément d'en-tête et à l'intérieur des que j'ai un right_header élément.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Voici mon Header 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}
Quelqu'un peut-il me dire la bonne façon d'y parvenir s'il vous plaît?
Remarque le côté gauche de logo, il ne chargera pas dans JFiddle!
Merci!
OriginalL'auteur Frank G. | 2013-10-09
Vous devez vous connecter pour publier un commentaire.
Vous pouvez facilement juste
float
vers la droite, pas besoin derelative
ouabsolute
positionnement.mise à Jour de jsFiddle - pourriez avoir besoin d'ajouter un peu de
padding
/margins
- comme ceci.Me battre pour elle, +1 😛 pour en savoir Plus: Ce ne sera utile quand flottante choses à l'intérieur, non flottait dans les conteneurs: webtoolkit.info/css-clearfix.html
Oui, qui pourrait être utile. Sinon, l'application de
overflow:hidden
pour le parent travaille essentiellement le même comme un clearfix - la forçant à le contenir enfants.Ne connaissais pas overflow:hidden, merci de nice. Semble qu'il y a quelques mises en garde: stackoverflow.com/questions/5565668/is-clearfix-deprecated
ce lien a été utile! Merci!!!!!
OriginalL'auteur Josh Crozier
Comme JoshC mentionné, à l'aide de
float
est une option. Je pense que votre situation suggère une autre solution, bien qu'.Vous devez définir
position: relative
sur votre#header
élément dans l'ordre de laposition: absolute
sur votre#right_header
de prendre effet. une fois que vous êtes libre de position#right_header
toutefois vous souhaitez par rapport à#header
En général, j'évite de positionnement absolu pour la raison exacte vous avez été de mentionner, cependant, les flotteurs ont leurs inconvénients. Il est important de mentionner que les éléments en position absolue de l'écoulement normal.
OriginalL'auteur Will Piers
Vous pouvez le faire de cette façon aussi, si vous voulez faire avec la position, Essayez s'il vous plaît ce
OriginalL'auteur Dinesh Kanivu
La réponse à l'aide de flotteurs de JoshC fonctionnera très bien, cependant, je pense qu'il y a une raison pour laquelle cela ne fonctionne pas.
La raison que votre code ne fonctionne pas, c'est que la position absolue par rapport à la, qui a des dimensions de 0x0.
L' " doit être absolument position dans l'ordre pour que ce code fonctionne.
la changer...
OriginalL'auteur contehhh