Comment flotter l'image et le texte correctement en utilisant css

Je veux un format html en utilisant le CSS pour que je reçois le texte suivant:Comment flotter l'image et le texte correctement en utilisant css

image à gauche, avec le sujet et corps à côté de lui sur la droite. Je veux sujet être sur une ligne et le corps être sur l'autre. Avec un message l'un après l'autre sur les blocs subséquents downs la page.

Cependant, je donne au sujet et au corps une ligne et un effet de cacade sur la page .

Voici ce que je semble obtenir.

alt text Je n'arrive pas à comprendre ce qui est nécessaire.

Mon html est:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>messages to/from someone</title> 
<link rel="stylesheet" type="text/css" href="messages.css" /> 
</head><body> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
</body></html>

Mon CSS est:

.floatimgleft { 
    float:left; 
    margin-top:10px; 
    margin-right:10px; 
    margin-bottom:10px; 
} 
.message{ 
    display: block; 
} 

.subject { 
    display: inline; 
} 
.body { 
    display: inline; 
}

Edit: J'ai édité le code pour montrer où je suis parti. J'avais l'impression que div class = 'message' provoquerait une coupure de ligne entre les messages mais j'obtiens un effet en cascade.

Source

2010-12-05 Preet Sangha

Il existe plusieurs options pour mettre fin à un flottant.comme ajouter un br ou un div avec une règle css comme: clear: both; ci-dessous pour l'image et le texte. Cependant, tous les navigateurs ne le manipuleront pas correctement (ahum ahum IE). Si vous avez vraiment besoin de terminer un float, mon expérience consiste à ajouter un div autour de l'image et du texte et de le placer sur css: zoom: 1; débordement: auto; est votre meilleure option dans un tel cas – PeeHaa

Cela peut être une réponse très stupide mais je ne vois pas la classe CSS * floatimgleft * utilisée dans votre code HTML. –

Ajouter:

class="floatimgleft"

à vos img tags:

<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />

En outre, vous semble n'utilisez pas to classe non plus et il vous manque = dans le <div class'message'>.

Voici un jsFiddle pour le tester:

http://jsfiddle.net/CdBSU/

EDIT: Pour avoir clairement, ajouter clear: left au message. Voir le violon:

http://jsfiddle.net/CdBSU/2/

pour une démonstration.

Source

2010-12-05 02:54:28

J'ai mis à jour la question. –

Voir la modification que j'ai faite. –

Merci parfait! –

Pour la mise en page que vous recherchez, je serais probablement aller avec quelque chose comme:

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>messages to/from someone</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <ul id="messages"> 
     <li> 
      <div> 
       <span class="icon"></span> 
       <h2>Subject</h2> 
       <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 
      </div> 
     </li> 
     <li> 
      <div> 
       <span class="icon"></span> 
       <h2>Subject</h2> 
       <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 
      </div> 
     </li> 
    </ul> 
</body> 
</html>

Style.css:

h2, p { clear: none; padding: 0px; margin: 0px; } 
ul#messages { text-align: left; } 
ul#messages li { margin-bottom: 25px; } 
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }

démontrée à: http://jsfiddle.net/j7KHg/2/

Source

2010-12-05 02:57:13

Je viens de générer à nouveau, mais je ne peux pas obtenir ce travail avec un CSS externe - http://jsfiddle.net/j7KHg/1/ –

Je l'ai ajouté à un CSS externe et archivé. Fonctionne bien .. http://www.speedyshare.com/files/25534991/example.zip –

Téléchargez l'exemple (archive) auquel j'ai lié dans le commentaire ci-dessus. Cela montre que cela fonctionne. Ce pourrait être votre référence au CSS. Ou que vous modifiez le HTML incorrectement après. Si vous copiez ce qui est dans mes archives et que vous l'exécutez, cela devrait fonctionner. –

Comment flotter l'image et le texte correctement en utilisant css

Répondre

Questions connexes