Comment aligner une image et un paragraphe dans la même ligne dans css?

Question

J'ai une conception dans laquelle un paragraphe et une image sont alignés sur la même ligne, comme indiqué ci-dessous:

En ce moment, je suis en mesure d'y arriver est en fiddle. J'utilise Bootstrap 3. J'ai essayé d'utiliser display: inline-block, display: block and display: inline mais malheureusement, je suis toujours incapable de mettre le paragraphe et une image dans la même ligne comme indiqué ci-dessus dans la conception.

Le code HTML pour la partie du paragraphe est:

<div id="line2" class="col-lg-12"> 
    <div class="cofounder-ceo-image"> 
    <img src="assets/img/Uploads/jack.jpg"> </div> 
    <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say </p> 
</div> 

Answer 1

Vous devez utiliser flotteur et direction: rtl;

#line2 .cofounder-ceo-image{float: left;} 
#line3{direction: rtl;}/*this is for right align like arabic*/ 
#line3 .cofounder-ceo-image{float: right;} 

Answer 2

Vous pouvez utiliser float: left pour rendre l'image « flotter » à proximité du paragraphe.

Quelque chose comme ça

img { 
 
    border-radius: 100%; 
 
    width: 100px; 
 
    height: 100px; 
 
    object-fit: cover; 
 
    float: left; 
 
    margin-right: 20px; 
 
}

<div id="line2" class="col-lg-12"> 
 
    <div class="cofounder-ceo-image"> 
 
    <img src="https://i.pinimg.com/736x/ee/bd/cc/eebdcc1600cae9e1d7ac3ef5e33b8778--series-on-netflix-drama-series.jpg"> </div> 
 
    <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you 
 
    say Whatever you say </p> 
 
</div>

Answer 3

Vous utilisez déjà une grille, alors mettez l'image dans une colonne. Cela signifie que le système de grille va tout gérer pour vous, au lieu d'essayer de travailler avec des flotteurs et de gérer vous-même.

Flotteurs qui ne sont pas idéales dans cette situation parce qu'ils prennent l'élément hors du flux qui peut introduire d'autres problèmes, comme étendre hors du récipient, déconner la mise en page, etc.

exemple d'ajouter l'image et du texte dans une nouvelle ligne avec 2 colonnes:

<div id="line2" class="col-lg-12"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <div class="cofounder-ceo-image"> 
      <img src="https://s26.postimg.org/6lwl4wpxl/jack.jpg"> 
     </div> 
     </div> 
     <div class="col-sm-8"> 
     <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever 
      you say Whatever you say </p> 
     <p class="ceo">ABC DEF - Co-founder and CEO</p> 
     </div> 
    </div> 
    </div> 

CSS supplémentaire requis (pour rendre l'image réactive):

.row img { 
    width: auto; 
    max-width:100%; 
    height: auto; 
} 

Ceci le fera correspondre à la largeur du conteneur jusqu'à 100% de sa taille. c'est-à-dire qu'il ne s'étire pas plus que sa largeur réelle.
Ceci est le seul changement que vous avez besoin pour votre CSS - vous n'avez certainement pas besoin de commencer à ajouter des portées, etc.

Fiddle: https://jsfiddle.net/cvaxvzbf/

Notes:

1. L'image est dans une colonne de 4/12 (c.-à-d. Un tiers de la ligne), et le texte est dans 8/12 - vous pouvez changer cela pour convenir.
2. Sur les petits écrans (< 768px), l'image et le texte apparaîtront sur des lignes séparées, sinon l'image pourrait être trop petite. Si vous voulez changer cela, vous pouvez utiliser col-xs-? par exemple.col-xs-6 sur les deux colonnes pour les rendre chaque moitié de la largeur
3. Le CSS ci-dessus fait l'ajustement de l'image dans la largeur de la colonne si la colonne est plus petite que l'image. Il ne fera pas l'étirement de l'image pour adapter la colonne si elle est plus large (à savoir qu'il ne sera jamais afficher l'image plus grande que sa taille réelle) - si vous voulez le faire, changer la largeur à 100%.

Answer 4

flotter simplement l'image, par exemple:

<img style="float:left;" src="assets/img/Uploads/jack.jpg">