Voici le stylo
https://codepen.io/brxtn/pen/rNOJKBq
.annotation{
height:auto;
font-family:cardo;
width:280px;
text-align:justify;
font-size:0.9em;
padding:30px;
transition:all 0.4s linear;
}
.annotext{
width:250px;
padding:0px;
}
.x{
padding-left:3px;
padding-top:3px;
color:#c73626;
}
.annobar{
display:block;
height:1px;
border:0;
border-top:1px solid #c73626;
margin:1em 0;
padding:0;
}
<div class="annotation"> <div class="annotext"> <div class=annobar></div> <div class="x">✕</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> </div>
Et j'ai eu du mal à tout garder à l'intérieur du div "annotation" et à obtenir cet alignement du "annobar" avec le texte:
3 Réponses :
Essayez d'ajouter:
<div class="annotation">
<div class="annotext">
<div class="x">✕</div>
<div class=annobar></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>au css pour x. Cela fera apparaître le X sur la droite.
De plus, si vous déplacez le X pour qu'il soit à l'intérieur de l'annotexte, et que l'annotexte soit "float: left", le X apparaît en haut de la ligne. P >
Pour terminer, vous faites en sorte que le X ait un fond blanc pour couvrir la ligne.
Voici le résultat final:
.annotation{
height:auto;
font-family:cardo;
width:280px;
text-align:justify;
font-size:0.9em;
padding:30px;
transition:all 0.4s linear;
}
.annotext{
width:250px;
padding:0px;
float:left;
}
.x{
padding-left:3px;
padding-top:3px;
color:#c73626;
float:right;
background-color:white;
}
.annobar{
display:block;
height:1px;
border:0;
border-top:1px solid #c73626;
margin:1em 0;
padding:0;
}
float: right
Merci pour votre réponse! J'ai essayé toutes sortes de choses avec la propriété float mais je n'ai eu aucun succès: (Quand je fais cela, j'obtiens le x à côté du texte plutôt qu'à côté de la barre, et quand j'essaye de mettre le x à l'intérieur du div annobar, il apparaît sous la barre plutôt qu'à côté D:
Essayez peut-être de faire un float et assurez-vous que le texte a une propriété clear: both pour qu'il passe à la ligne suivante. Sinon, essayez une disposition en grille avec 2 colonnes qui placera le x sur cette zone. Faire en sorte que le texte occupe toute la ligne
Vous pouvez positionner le x de manière absolue en utilisant la moitié de la marge de l'annobar comme position supérieure (donc -0,5rem dans ce cas) et en faisant l'annotexte position: relative (donc en le coin est l'endroit où vous voulez le x):
<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>
.annotation{
height:auto;
font-family:cardo;
width:280px;
text-align:justify;
font-size:0.9em;
padding:30px;
transition:all 0.4s linear;
}
.annotext{
width:250px;
padding:0px;
position: relative;
}
.x{
padding-left:3px;
padding-top:3px;
color:#c73626;
position: absolute;
right: 0;
top: -0.5rem;
}
.annobar{
display:block;
height:1px;
border:0;
border-top:1px solid #c73626;
margin:1em 0;
padding:0;
width: 90%;
}
position: absolue n'est pas une solution réactive, et ma solution non plus d'ailleurs. plutôt que de spécifier width: px, il serait plus avantageux pour un design réactif d'utiliser des pourcentages sur la largeur. Cela signifie que lorsque le navigateur est redimensionné et que div est contenu dans d'autres éléments parents, la largeur du div augmentera / rétrécira selon les besoins, tout en conservant la position de l'en-tête div que j'ai créé dans ma réponse à la question.
J'ai ajouté un div d'en-tête, puis j'ai mis à la fois le X et la ligne rouge à l'intérieur. Ensuite, j'ai utilisé le flotteur gauche sur les deux. J'ai ensuite défini la largeur du parent principal pour limiter la largeur du texte. Vous devrez effacer: les deux sur le texte div à cause des flottants.
MODIFIER Lien Codepen corrigé Voici le codepen.
Utilisez ceci pour le HTML
.annotation{
height:auto;
font-family:cardo;
width:265px;
text-align:justify;
font-size:0.9em;
padding:30px;
transition:all 0.4s linear;
}
.annotext{
padding:0px;
}
.x{
padding-left:3px;
padding-top:3px;
color:#c73626;
float:left;
}
.annobar{
display:block;
height:1px;
border:0;
border-top:1px solid #c73626;
margin:1em 0;
padding:0;
float: left;
width:250px;
}
.text{
clear:both;
}
Utilisez ceci pour le CSS
<div class="annotation">
<div class="annotext">
<div class="header-div">
<div class=annobar></div>
<div class="x">✕</div>
<div/>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>