web-dev-qa-db-fra.com

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

Ok donc j'essaie d'aligner une image (qui est contenue dans une div) et du texte (également contenue dans une div) sur la même ligne, sans définir 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 peuvent être placés sur la même ligne, mais mon texte est assez long et saute automatiquement sur une autre ligne sous l'image.

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

J'essaie de résoudre ce problème depuis environ 3 heures, je suis tellement noob, s'il vous plaît, aidez-moi? : S

cssimagehtmlalignment
15
Maria

Flottant entraînera un habillage si l'espace n'est pas disponible.

Vous pouvez utiliser display:inline et white-space:nowrap pour y parvenir. 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>​
17
Paul Fleming

Essayer

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

Attribut HTML simple:

align="left"

Autres valeurs pour l'attribut:

  • bas
  • la gauche
  • milieu
  • droite
  • haut
8
Hitesh Modha

Je sais que cette question a plus de 6 ans, mais je voudrais quand même partager ma méthode en utilisant des tableaux et cela ne nécessite aucun CSS.

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

À votre santé! Happy Coding

4
Suyash Doneria

Pour obtenir l'effet souhaité, vous devez placer la balise d'image à l'intérieur du même div que votre texte. Réglez ensuite le float: left attribut sur l'image. J'espère que cela t'aides!

4
Greg9Strat

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

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

si ce n'est pas le cas, essayez simplement:

float:right;

float:left;

ou display: inline au lieu de inline-block

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

2
user5833601

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>

Ça marche pour moi

1
Hafiz Ahmed

Méthode 1:

Les éléments en ligne n'utilisent pas la largeur ou la hauteur que vous spécifiez. Pour éviter deux div et 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>

Méthode 2:

Changez votre CSS comme suit

.container div {
    display: inline-block;
    }

Méthode 3:

C'est la largeur de jeu de méthode simple Essayez le 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;
}
0
bob marti

J'ai construit sur la dernière réponse et utilisé display:table pour un div externe et display:table-cell pour les divisions internes.

C'était la seule chose qui fonctionnait pour moi en utilisant CSS.

0
John Moore