Html, table, img & css - comment faire pour que le texte s'enroule correctement ?

Question

J'ai obtenu le code suivant, mais il ne m'a pas donné le résultat souhaité - ce que je cherche est conforme à l'image ci-dessous, qu'est-ce que je fais mal ?

<style>
table.control_grid tr {
    text-align: center;
    width: 200px;
}
table.control_grid td {
    width: 120px;
    height: 48px;
}
table.control_grid a {
    text-decoration: none;
}
table.control_grid img {
    vertical-align: text-top;
}
</style>

<table class="control_grid">
    <tr>
        <td><img width="48" height="48" src="icon1.gif">My text & stuff, overflow??</td>
        <td><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>

Résultat souhaité :

Résultat souhaité http://mpasqualone.com/wantedResult.gif

Answer 1

Vous devriez faire flotter les images.

float:left ;

Answer 2

Essayez d'ajouter le CSS suivant :

table { table-layout: fixed; }

Cela déclenche l'"algorithme de mise en page fixe du tableau", dans lequel la mise en page horizontale dépend uniquement de la largeur du tableau et de la largeur des colonnes, et non du contenu des cellules.

Outre la résolution de votre problème, cela améliore également les performances : une disposition de tableau fixe permet aux navigateurs de rendre le tableau plus rapidement que la disposition de tableau automatique, car le navigateur peut commencer à afficher le tableau dès la réception de la première ligne.

Answer 3

Une chose que vous avez oubliée, fermez la balise img comme ceci (et n'oubliez pas l'attr alt :) )

<img width="48" height="48" src="icon1.gif" alt="" />

Le code ci-dessus est conforme au xhtml

Answer 4

Utilisez comme ceci pour votre sortie désirée :

<table class="control_grid">
    <tr>
        <td align="left" valign="top"><img width="48" height="48" src="icon1.gif" align="left">My text & stuff, overflow??</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>