Comment puis-je convertir cette solution de mise en page de tableau HTML en solution flottante-div?

J'ai souvent besoin de la liste des articles avec différentes tailles images sur la gauche et texte à droite, comme ceci:Comment puis-je convertir cette solution de mise en page de tableau HTML en solution flottante-div?

alt text http://www.deviantsart.com/upload/7s01l5.png

Depuis 17 ans, je l'ai résolu ce avec tables HTML, comme ceci:

<html> 

    <style> 

    * { margin: 0; padding: 0 } 

    body { 
     padding: 20px; 
    } 

    #content { 
     width: 600px; 
     padding: 20px; 
     margin-left: auto; 
     margin-right: auto; 
     background: green; 
    } 

    .item { 
     margin: 0 0 20px 0; 
    } 

    .itemIcon { 
     float:left; 
    } 

    .itemBody { 
     float:right; 
    } 

    .clear { 
     clear: both; 
    } 

    </style> 

<body> 

<div id="content"> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="bigIcon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the second item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>  
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

</div> 

</body> 
</html>

Chaque fois que je l'ai essayé de passer à divs flottant, il a a échoué pour une raison ou une autre, voici ma tentative actuelle:

alt text http://www.deviantsart.com/upload/tuvquv.png

Que dois-je changement à ce code afin que cette div solution ressemble à la table Solution?

<html> 

    <style> 

    * { margin: 0; padding: 0 } 

    body { 
     padding: 20px; 
    } 

    #content { 
     width: 600px; 
     padding: 20px; 
     margin-left: auto; 
     margin-right: auto; 
     background: green; 
    } 

    .item { 
     margin: 0 0 20px 0; 
    } 

    .itemIcon { 
     float:left; 
    } 

    .itemBody { 
     float:right; 
    } 

    .clear { 
     clear: both; 
    } 

    </style> 

<body> 

<div id="content"> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="bigIcon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the second item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>  
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

</div> 

</body> 
</html>

Source

2010-02-28 Edward Tanguay

En regardant en arrière pour voir que vous voulez que la hauteur du conteneur d'image à pousser vers le bas (ala 100% hauteur avec débordement: caché sur son parent) ... il n'y a pas un moyen CSS pur de le faire (sans piratage). Comme je déteste probablement les hacks plus que le balisage non-sémantique, je supprime ma réponse: P –

Je ne sais pas Timothy, mon exemple semble fonctionner, même si je l'ai seulement regardé dans IE7 et Firefox. Le seul inconvénient de ma solution est de devoir régler le padding/marge en fonction de chaque image. – Erik

Alors, pourquoi passer à divs si cela a fonctionné avec des tables pendant 17 ans? Juste parce que tout le monde se moque de l'utilisation de tableaux pour la mise en page ne signifie pas que c'est faux, je pense que l'utilisation de divs est juste la chose à faire, mais cela ne signifie pas que c'est toujours la meilleure solution. – Mottie

Ce n'est pas très souple - vous devez définir le rembourrage pour chaque DIV en fonction de l'image, mais il est sage balisage très propre:

<style> 
div.one { 
    padding-left: 210px; 
    overflow: auto; 
} 
div.one img { 
    float: left; 
    margin-left: -210px; 
} 
</style> 


<div class="one"> 
<img src="http://www.pixeloution.com/breakdown.png" width="200" /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit orci sed turpis aliquet ac mattis sem t... 
</div>

Voir en action à: http://jsbin.com/iniqu3/2

Notez que si votre écran est très étroit, le texte ne s'enroulera pas autour de l'image, comme dans votre exemple.

Source

2010-02-28 13:33:50 Erik

Et vous pouvez écraser les styles div.one et div.one img en donnant au div différentes classes et en utilisant la cascade, si les tailles possibles sont connues. div.one.big {padding-left: 300px; } div.one.big img {margin-left: -300px} et ainsi de suite. –

Vous pouvez le faire de tri de travail en ajoutant une largeur à la <p> au sein itemBody (et un peu de rembourrage pour le rendre agréable):

.itemBody p { 
    width:400px; 
    padding-left:20px; 
} 

.itemBody h1 { 
    padding-left:20px; 
}

Le problème avec cette solution est que les bords droit du les paragraphes seront alignés différemment en fonction de la taille de l'image, et le texte pourrait toujours tomber à la ligne suivante si l'image est assez large. Si vous pouvez dimensionner dynamiquement les choses avec du code côté serveur en fonction de la taille de l'image, alors ce serait bien. (Ou je suppose que vous pourriez faire le redimensionnement en javascript.)

Je pense vraiment que c'est un problème encore mieux résolu avec des tables. Vous obtenez le réglage dynamique de la largeur et tout reste sur la même ligne, quelle que soit la taille de vos images et de votre texte. Pas de hacks, pas d'histoires, fonctionne dans tous les navigateurs.

Source

2010-02-28 14:15:11 Ray

Comment puis-je convertir cette solution de mise en page de tableau HTML en solution flottante-div?

Répondre

Questions connexes