aligner une image et du texte sur la même ligne sans utiliser la largeur div?

Ok donc je vais essayer d'aligner une image(qui est contenue dans une div) et du texte(également contenu dans un div) sur la même ligne, sans réglage de la largeur du texte, comment puis-je le faire? C'est ce que j'ai jusqu'à présent.

<div id="container">

    <div id="image" style="float:left;">
        <img src="tree.png"  align="left"/>
    </div>

    <div id="texts" style="float:left;"> 
        A very long text(about 300 words) 
    </div>

</div>

Lorsque le texte est court, l'image et le texte peut être adapté dans la même ligne, mais mon texte est assez long, et il passe automatiquement sur une autre ligne au-dessous de l'image.

En gros, maintenant, c'est ceci: http://puu.sh/MPw2
Je veux faire ceci: http://puu.sh/MPvr

Je suis tenté de résoudre ce problème pendant 3 heures, je suis tellement noob s'il vous plaît aider? :S

source d'informationauteur Maria

  1. 14

    Flottant entraînera dans l'emballage si l'espace n'est pas disponible.

    Vous pouvez utiliser display:inline et white-space:nowrap pour atteindre cet objectif. Violon

    <div id="container" style="white-space:nowrap">

    <div id="image" style="display:inline;">
        <img src="tree.png"/>
    </div>

    <div id="texts" style="display:inline; white-space:nowrap;"> 
        A very long text(about 300 words) 
    </div>

</div>​
  2. 6

    Essayer

    <img src="assets/img/logo.png" align="left" />
Text Goes here

    Simple Attribut HTML:

    align="left"

    D'autres valeurs pour l'attribut:

    • bas
    • gauche
    • milieu
    • droit
    • haut
  3. 4

    Pour obtenir l'effet désiré, vous devez placer la balise d'image à l'intérieur de la même div que votre texte. Définissez ensuite la float: left attribut sur l'image. Espérons que cette aide!

  4. 2

    Je travaillais sur un autre projet quand j'ai vu cette question, c'est la solution que j'ai utilisé et il semble fonctionner.

    #[image id] , p {
        vertical-align: middle;
        display: inline-block;
    }

    si elle ne fonctionne pas, essayez :

    float:right;

float:left;

    ou
    display: inline au lieu de inline-block

    Cela a fonctionné pour moi, j'espère que ça a aidé!

  5. 2

    Je sais que cette question est de plus de 6 ans, mais tout de même, je voudrais partager ma méthode à l'aide de tableaux et cela ne nécessite pas de feuille de style CSS. 

    <table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>

    Cheers!
    Heureux De Codage

  6. 1

    Essayer 

    <p>Click on <img src="/storage/help/button2.1.png" width="auto" 
height="28"align="middle"/> button will show a page as bellow</p>

    Il fonctionne pour moi

  7. 0

    Method1:

    Des éléments en ligne ne pas utiliser toute la largeur ou de la hauteur que vous spécifiez.
    Pour éviter les deux div et de l'utiliser comme ceci:

     <div id="container">
<img src="tree.png"  align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
    <style>
            img {
                display: inline;
                width: 100px;
                height: 100px;
            }
            h1 {
                display: inline;
            }
        </style>

    Method2:

    Modifier votre CSS comme suit

    .container div {
    display: inline-block;
    }

    Method3:

    C'est la méthode simple pour régler la largeur
    Essayez le code css suivant:

    .container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts { 
height: auto;
width: 30%;
display: inline;
}
  8. 0

    J'ai construit sur la dernière réponse et utilisé display:table pour un div extérieure, et display:table-cell à l'intérieur de divs.

    C'était la seule chose qui a fonctionné pour moi à l'aide de CSS.