jQuery Girl
  1. jQuery Girl
  3. Bouton droit d’alignement à l’intérieur de la DIV
Intereting Posts
jquery Ui-dialog et ie8 datatables – Neutraliser la recherche de colonne individuelle avec accent Changer la couleur de l’option sélectionnée uniquement jQuery: comment obtenir l’élément de base le plus à l’intérieur sur lequel je passe, globalement, pour l’ensemble du corps du document? Basculer / afficher un DIV défini avec JS onsubmit return false ne fonctionne pas Validation jQuery sans balise de formulaire Comment envoyer et recevoir la demande POST sur asp.net? Rechercher du texte (A) et le remplacer par du texte (B) + HTML Comment convertir le mot de passe en md5 en jquery? en utilisant jquery, comment puis-je sélectionner une image à l’intérieur d’un div pour changer sa source Comment faire fonctionner la recherche dans la barre d’outils jqGrid? Maçonnerie – imagesLoaded – Pas une fonction javascript location.href écouteur d’événement onchange? TypeError: ‘undefined’ n’est pas une fonction (évaluation ‘$ (“. Fancybox”). Fancybox ()’)

Bouton droit d’alignement à l’intérieur de la DIV

Je suis plus à l’aise en tant que développeur back-end, mais j’ai une question de style qui me laisse perplexe. J’ai un échantillon de mon scénario posté ici .

Je crée une div qui est affichée / masquée sur la base d’un clic de bouton pour afficher les détails d’un élément particulier. Cette partie fonctionne bien, mais sa présentation n’est pas tout à fait là.

Voici la mise en page de base:

Avec CSS d’accompagnement: 

 #signatureTitle { text-transform: uppercase; font-size: 16px; } #signatureFooter { bottom: 0; position: absolute; } #signatureFooter > div, #signatureFooter > label, #signatureFooter > input { display: inline; } #signatureFooter > input { right: 0; align: } #signatureImage > img { height: 90%; width: 90%; border: grey 1px solid; display: block; margin-left: auto; margin-right: auto; }

Je veux que tout dans le div signatureFooter épinglé au bas, ce qui fonctionne bien avec mon CSS existant. Cependant, à l’intérieur de cette closeSignature , je veux que closeSignature soit épinglé à droite. J’ai essayé de jouer avec l’atsortingbut position , comme donner l’ absolute mais cela le pousse en dehors du div signaturePopup le contient. Qu’est-ce que je rate? Je suppose que c’est facile, mais comme je l’ai mentionné plus tôt, le CSS n’est pas mon point fort. Toute suggestion sur une mise en page plus simple / meilleure serait également la bienvenue.

J’utilise jQuery pour append dynamicment les contrôles img , si cela ouvre des possibilités.

Cette question semblait un peu similaire à première vue, mais je ne pense pas avoir affaire à une div trop grande.

MODIFIER
Deux détails que j’ai omis à l’origine sont

  1. Je souhaite que les contrôles signatureStatus et signatureUserDetails restnt alignés à gauche. Je veux seulement closeSignature épinglé à droite.
  2. signatureFooter doit restr en dessous de signatureImage , certaines des réponses initiales se chevauchent.

définir la largeur de la div parente à 100% .Pour que vous puissiez placer le bouton de fermeture à droite. 

 #signatureFooter > input { float:right; } #signatureFooter { bottom: 0; position: absolute; width:100%;

JSFiddle

essayez float: right css property pour épingler la signature proche au côté droit.

Juste pour que vous sachiez, CSS a quelques problèmes étranges avec l’inheritance, particulièrement autour de l’atsortingbut position Donnez à la signaturePopup une position de parent, puis essayez de jouer avec le positionnement.

Voici un violon qui, je pense, fait ce que vous voulez: http://jsfiddle.net/k9HxW/

De plus, notez que nous essayons généralement de ne pas mettre de styles sur les ID en CSS, mais plutôt de leur donner des classes: 

 .signaturePopup{ position: relative; }

Vous devez donner à l’élément parent la position: relative; si vous utilisez absolute éléments à positionnement absolute .

css: 

 #signaturePopup { position: relative; } #signatureFooter { bottom: 0; right: 0; position: absolute; background: #f7f7f7; }

Enfin, un violon: démo