web-dev-qa-db-fra.com

CSS Float: Flottant une image à gauche du texte

Pour chaque boîte aux lettres, je veux que la vignette flotte à gauche et le texte à droite. Je ne veux pas que le pouce enveloppe le texte.

Voici mon code html:

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

J'ai essayé plusieurs façons et je n'arrive toujours pas à le faire fonctionner ... le texte ne s'affiche pas à droite ...

Voici mon code CSS:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}
htmlcsscss-float
33
Cris

Est-ce ce que vous recherchez?

  • J'ai changé votre titre en une balise h3 (en-tête), car il s'agit d'un choix plus sémantique que d'utiliser une variable div.

Démo en direct n ° 1
Démo en direct n ° 2(avec l'en-tête en haut, vous n'êtes pas sûr de vouloir cela)}

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
   </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}
79
thirtydot

Juste besoin de faire flotter les deux éléments à gauche:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

Edit: en fait, vous n’avez pas besoin de la largeur, faites simplement flotter les deux à gauche

4
Demelziraptor

J'utilise presque toujours juste le débordement: caché sur mes éléments de texte dans ces situations, cela fonctionne souvent comme un charme;)

.post-container {
 margin: 20px 20px 0 0;
 border:5px solid #333;
}
.post-thumb img {
 float: left;
}
.post-content {
 overflow:hidden;
}
1
Optimator

Découvrez cet exemple: http://jsfiddle.net/Epgvc/1/

Je viens de faire flotter le titre à gauche et d'ajouter un clear:both div en bas ..

1
Dutchie432

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    width:600px;
    overflow:hidden;
}

.post-thumb img {
    float: left;
    clear:left;
    width:50px;
    height:50px;
    border:1px solid red;
}

.post-title {
     float:left;   
    margin-left:10px;
}

.post-content {
    float:right;
}
<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

jsFiddle

1
dmackerman

Définissez la largeur de post-content et post-thumb de manière à obtenir une disposition en deux colonnes.

0
quarkdown27