8
votes

CSS - Comment aligner l'image gauche en bas sur le bloc de texte?

text alt

comme cette image?

css

0 commentaires

5 Réponses :

0
votes

Vous utiliseriez:

float: left; 
position: absolute;
bottom: 0px;

1 commentaires

Il ne fonctionnera pas comme alignement vertical: le bas n'a aucun effet dans la structure de la transmission

0
votes

Ajouter un style suivant à l'image

float: left; 
padding-right:10px;
padding-top:10px;
position:absolute,
bottom: 10px;

1 commentaires

De cette façon, l'image posera un texte qui n'est pas attendu

3
votes

qui n'est pas possible dans HTML / CSS.

Le positionnement absolu permet un placement comme celui-là, mais vous devez vous assurer que d'autres contenus ne s'affrontant pas avec elle - aucun texte qui coule autour.

Le mécanisme de flotteur vous donne de l'écoulement, mais permet uniquement de placer le flotteur sur le niveau horizontal de son "ancre" - pas de positionnement mais de gauche / droite.

0 commentaires

0
votes

Il est possible, j'ai monté une image placée droite droite, pas en bas à gauche, vous pouvez peut-être travailler avec elle. XXX PRE>

La case: P>

<div class="wrap-box"> 
<img src="http://farm5.static.flickr.com/4020/4656328142_faab111247.jpg"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

2 commentaires

Il n'est pas possible avec HTML / CSS. Float il est parti et il est à gauche mais vous ne pouvez pas l'aligner avec le bas du paragraphe.

Hmm, supposons que, mais seulement en haut à gauche et à droite ne peut fonctionner que, il est donc à la moitié possible: p

0
votes

qui est maintenant possible en utilisant des formes CSS avec une hauteur de conteneur connue ou l'utilisation de JS.

Vous avez besoin d'un conteneur d'image de hauteur flotté à 100%: p> xxx pré>

réel La forme du flotteur est un rectangle aligné de bas défini par forme-extérieur Propriété: P>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <h3>Unknown height container</h3>
  <div class="text">
    <div class="float-bottom float-left">
      <div class="image">image</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa. Pellentesque ac magna eget nunc efficitur ultrices nec in ipsum. Praesent interdum elementum turpis.
      <p>
        Sed suscipit nulla eu dapibus dignissim. Vestibulum scelerisque sed turpis eget ultrices. Ut ut pharetra ex. Nam hendrerit magna a varius vehicula. Nunc risus dui, dictum et ex quis, viverra interdum sem. Proin varius sapien ipsum. Maecenas felis purus,
        egestas a massa non, pharetra vulputate tellus. Suspendisse potenti. Sed viverra aliquam iaculis. Quisque non diam sapien. Curabitur semper velit non urna congue, at consectetur turpis finibus.
  </div>

  <h3>Known height</h3>
  <div class="text-known-height">
    <div class="float-bottom float-right">
      <div class="image">image</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa.
  </div>

</body>

</html>

1 commentaires

Intéressant ... Mais cela ne fonctionne que si vous pouvez deviner la quantité d'espace vertical que vous devez accueillir pour l'image.