deux divs côte à côte (à nouveau)

Question

J'ai lu d'innombrables articles sur ce sujet mais je suis encore à trouver une solution qui fonctionne. Je veux simplement avoir deux divs côte à côte avec le div LHS étant la largeur du char FA et le div RHS étant le reste.

<div class="helper"> 
    <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div> 
    <div class="text-muted"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus. 
    </div> 
</div> 

Answer 1

Set display:table-cell à votre contenu et l'icône donnera la sortie désirée. Vérifiez l'extrait ci-dessous.

.inline { 
 
    display: table-cell !important; 
 
    width: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="helper"> 
 
    <div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span> 
 
    <div class="text-muted inline"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. 
 
     Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus. 
 
    </div> 
 
    </div>

Answer 2

Je ne sais pas ce que vous essayez de faire, mais vous pouvez utiliser quelque chose comme Flexbox qui est dans le violon JS here.

Sinon, vous pouvez faire quelque chose comme ceci:

HTML

<div class="helper"> 
    <div class="text-info">FA</div> 
    <div class="text-muted"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus. 
    </div> 
</div> 

CSS

.text-info, .text-muted { 
    float:left; 
} 
.helper { 
    clear:both; 
} 

Si vous voulez que les deux d'entre eux pour avoir des largeurs différentes, vous pouvez simplement définir les largeurs de chacun (en utilisant %, px ou autre).

Answer 3

Je crois que c'est ce que vous allez pour:

.text-muted { 
 
    display: table-cell; 
 
} 
 

 
.text-info { 
 
    padding-right: 10px; 
 
    display: block; 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="helper"> 
 
    <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div> 
 
    <div class="text-muted"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus. 
 
    </div> 
 
</div>

Voir aussi this Fiddle.