Chevauchement des éléments d'une manière propre?

J'ai plusieurs zones de texte que j'ai placées dans Bootstrap RowFluid et Span12.Chevauchement des éléments d'une manière propre?

Il reste du flottant qui, en fonction de la largeur, fait apparaître 4 cases sur chaque ligne.

Ce que je voudrais faire est de placer un X en haut à droite de chaque boîte afin que quelqu'un puisse cliquer sur le X et supprimer la boîte.

Je n'arrive pas à comprendre comment chevaucher d'une manière propre. Est-ce que quelqu'un peut suggérer une méthode et je la bidouillerai?

html

<div class="box-list"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <a href="/box/1">First box</a> 
      <a href="/box/2">Second box</a> 
      <a href="/box/3">Third box</a> 
      <a href="/box/4">Fourth box</a> 
      <a href="/box/5">Fifth box</a> 
      ...etc 
     </div> 
    </div> 
</div>

CSS

.box-list a{ 
    width:22%; 
    height:100px; 
    font-size:20px; 
    line-height: 50px; 
    padding:25px 0 25px 0; 
    text-align: center; 
    border: 1px dashed #333333; 
    float:left; 
    background-color:#EEE; 
    margin: 5px 1% 5px 1%; 
    color:#333; 
    display:block; 
}

J'ai essayé un certain nombre de choses, mais n'ont pas été en mesure d'obtenir à regarder à droite du tout. J'ai essayé de mettre les liens dans des conteneurs et de placer le CSS du conteneur sur le CSS ci-dessus. Ensuite, j'ai ajouté de nouveaux liens «supprimer» où le texte est seulement un X et mettre position:absolute mais il en résulte des résultats vraiment bizarres. J'ai essayé de créer 2 boîtes une avec du texte et une sans, mais alors les boîtes ne peuvent pas sembler se chevaucher à 100%. Je suis à une perte si des suggestions contribueraient

Y compris un violon avec quelques changements que je tentais: http://jsfiddle.net/sX2BC/

Source

2013-03-16 Terence Chow

le lien avec suppression position: absolute serait la meilleure façon. avoir raison: 0; top: 0 (ou 10px, etc. si vous voulez un rembourrage). Assurez-vous simplement que le div dans lequel vous mettez le lien a une 'position: relative;' – kennypu

@kennypu Pour une raison quelconque, le X n'apparaît pas en haut quand je fais cela. Il apparaît un couple de pixels ci-dessous. Y a-t-il une raison pourquoi? Quand j'essaie de faire exactement la même boîte, elle montre quelques pixels (peut-être 10-20) ci-dessous. Je n'arrive pas à faire se chevaucher exactement la même boîte. –

pouvez-vous faire un vibromasseur de ce que vous faites? – kennypu

Tout d'abord, vous avez eu beaucoup de marges/rembourrages sur le conteneur et la boîte qui a affecté le chevauchement. Enlever la plupart d'entre eux permettra à la boîte de se chevaucher bien avec le conteneur. Ensuite, j'ai retiré le float:left sur les boîtes, car ce n'est pas nécessaire, et je vais retirer la boîte du flux régulier. Enfin, pour faire l'affichage d'une étiquette comme une boîte, j'ai changé son affichage à display:inline-block. Il devrait être proche de ce que vous vouliez:

violon mise à jour: http://jsfiddle.net/sX2BC/3/

Source

2013-03-16 03:38:00 kennypu

Incroyable. Merci Monsieur. Je n'ai pas réalisé que le rembourrage faisait quoi que ce soit sur une boîte vide. Merci encore! –

Chevauchement des éléments d'une manière propre?

Répondre

Questions connexes