Aligner une image vers la gauche avec div à droite

J'ai des problèmes pour faire flotter l'image vers la droite pendant que le reste du texte et le div flottent vers la droite.Aligner une image vers la gauche avec div à droite

Je peux le faire fonctionner avec une image de largeur fixe mais si j'échange l'image pour une taille légèrement différente, cela ne fonctionnera pas car j'utilise des tailles fixes. Y at-il un moyen pour que cela fonctionne quand je ne connais pas la taille de l'image? Ou devrais-je utiliser JS pour cela?

http://jsfiddle.net/agcH5/

<div style="width:900px"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Course Name</h3> 
    </div> 
    <div class="panel-body"> 
     <img src="http://i.imgur.com/TyQ45nk.jpg"> 
     <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p> 
     <div class="container-fluid row"> 
      <div class="col-md-9" style="padding: 0"> 
       <div class="progress"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
         80% 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <a href="#" class="btn btn-sm btn-danger">Continue</a> 
      </div> 
     </div></div> 
    </div> 
</div> 
</div>

Source

2014-07-11 Rlweb

qui 'div' ne voulez-vous flotter à droite? – Ani

Vous pouvez essayer d'utiliser soit CSS ou un attribut de style en ligne:

<img src="http://i.imgur.com/TyQ45nk.jpg" style="float:right">

si vous ne voulez pas de mots sur la même ligne que l'image, vous pouvez ajouter le 'clear: right' attribut aussi bien.

Source

2014-07-11 21:27:01

Peut-être que je n'ai pas fait mon auto assez clair mais je veux aussi que la barre de progression div soit sur la droite de l'image avec le texte – Rlweb

Vous pouvez ajouter float: left à image

.panel-body img{ 
    float: left; 
    margin: 0 0 10px 0; 
} 

.rightContent{ 
    margin-left: 380px; 
}

Cocher cette Demo

Source

2014-07-11 21:29:20 amol

Comme ci-dessus je veux aussi que la barre de progression soit sur la droite de l'image – Rlweb

tout le contenu va à droite de l'image, avez-vous vérifié la démo? Vérifiez cette nouvelle démo http://jsfiddle.net/amoljawale/agcH5/4/ – amol

simplement d'utiliser des classes de grille du bien bootstrap. Je modifié le code dans votre div avec le panneau corps de classe

<div class="panel-body"> 
     <div class="col-md-6"> 
     <img src='http://i.imgur.com/TyQ45nk.jpg'> 
     </div> 
     <div class="col-md-6"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p> 
     <div class="progress"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
         80% 
        </div> 
       </div> 
     <a href="#" class="btn btn-sm btn-danger">Continue</a> 
     </div> 
    </div>

Démo: http://jsbin.com/gamaj/1/

Source

2014-07-11 21:30:06

Comme je l'ai dit ci-dessus, merci pour la réponse, mais je veux aussi la barre de progression à l'être sur la droite de l'image – Rlweb

mis à jour la réponse et la démo :) –

Aligner une image vers la gauche avec div à droite

Répondre

Questions connexes