Plusieurs lignes de texte à côté de l'image (CSS, HTML)

Je suis en train de mettre 2 lignes de texte à côté d'une image, un peu comme ce

_________
|       | Line one of text
| image |
|       | Line two of text
---------

C'est le code que j'ai jusqu'à présent

<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
    <br>
    <span class="ban2">Line 2 of text</span></p>
 .banner p {
  font-family: "Gentium Basic";
  font-size: 19px;
  text-align: center;
  color: #aaa;
  margin-top: -10;
  display: block;
 }
.banner img {
  float: center; 
    margin: 5px;
 }
 .banner span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }
  .banner .ban2 span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }

Mais actuellement il fait ceci:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

J'ai cherché partout sur le web, mais n'ont pas été en mesure de comprendre comment faire cela, toute aide serait la bienvenue.

InformationsquelleAutor OstlerDev | 2013-12-05
  1. 16

    Il n'y a pas une telle chose comme float: center; Vous pouvez choisir left, right, ou none.

    http://jsfiddle.net/vd7X8/1/

    Si vous float: left; sur l'image, on va faire ce que vous êtes après.

    Si vous voulez qu'il soit centré, alors vous allez avoir à envelopper l'image et le texte dans un conteneur, de fixer la largeur du conteneur et ne margin: 0 auto; sur elle, puis continuer à avoir votre image flottait--sauf qu'il est contraint par le wrapper.

    • Je suis en train de centre de l'image et du texte dans une bannière, si je le fais flotter à gauche puis il va tout le chemin vers la gauche sans m'autoriser à faire qu'il soit centré.
    • Si vous voulez qu'il soit centré, alors vous allez avoir à envelopper l'image et le texte dans un conteneur, de fixer la largeur du conteneur et ne margin: 0 auto; sur elle, puis continuer à avoir votre image flottait--sauf qu'il est contraint par le wrapper. Voir ceci: jsfiddle.net/vd7X8/1 (également mis à jour la réponse.)
    InformationsquelleAutor Ming
  2. 3

    Voici un extrait à l'aide d'une svg de sorte que vous pouvez tester n'importe où.

    CSS:

    .img{
    float: left;
    margin-right:1rem;
}

    HTML:

    <div>
  <svg class="img" width="50" height="50" >
    <rect width="50" height="50" style="fill:black;"/>
  </svg>
  <p>
    Line 1
    <br>
    Line 2
  </p>
</div>

    InformationsquelleAutor mvndaai
  3. 2

    Je sais que ce post est vieux, mais l'enveloppe de votre élément dans un div et d'appliquer les vertical-align:top à ce div et vous avez terminé.

    • Ouais, avec des solution de contournement qui pourrait être utilisable solution. Btw, post âge n'a pas d'importance, Q&A sont ici pour offrir de l'aide à d'autres gens aussi (en face de la même ou des problèmes similaires).
    • non, ne fonctionne pas, jsfiddle?
    InformationsquelleAutor user3491125
  4. 1

    Vérifier. Elle est bien définie css.

    <!DOCTYPE html>
<html>
   <head>
      <title>Selectors</title>
      <style>
         .banner p {
             font-family: "Gentium Basic";
             font-size: 19px;
             text-align: center;
             color: #aaa;
             margin-top: -10;
             display: block;
         }
         img, span {
             float:left;
         }
         .banner img {
             float: center; 
             margin: 5px;
         }
         [class="ban1"]{
             font-size: 17px;
             position:relative;
             top:50px;
             left:11px;
         }
         [class="ban2"] {
             font-size: 17px;
             position: relative;
             left: -97px;
             top: 74px;
         }
      </style>
   </head>
   <body>
      <div class="banner">
         <div class="wrapper">
            <p><img src="span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>
    • Cela dit float: center; ce n'est pas possible en css
    InformationsquelleAutor Asraful Haque
  5. 1

    Voici ma version de démonstration qui ont l'aide de float et overflow avec certaines expliquer

    CSS:

    .div1 {
     border: 3px solid #0f0;
     overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements" 
}
.img {
    float: left;
    width:100px;
    height:100px;
    background: #000 
}
.div2 {
    float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}

    HTML:

    <div class="div1">
  <img class="img"/>
  <div class="div2">
    <p> Line 1 </p>
    <p> Line 2 </p>
  </div>
</div>

<p>Next elements</p>

    Espoir aide

    Plusieurs lignes de texte à côté de l'image (CSS, HTML)

    InformationsquelleAutor Phan Van Linh
  6. 0

    Je sais que c'est vieux post, mais je voulais dire que non seulement float va le faire, le <img> balise est doté d'un attribut appelé align="left" qui n'est qu'ainsi

    <p>
 <img src="smiley.gif" align="left"><span>Line one of text</span>
 <br>
 <span class="ban2">Line 2 of text</span>
</p>

    Violon: http://jsfiddle.net/356akcoy/

    InformationsquelleAutor Ricky Levi