HTML, таблица, IMG и CSS - как получить текст, чтобы правильно обернуть?

Question

У меня есть следующий код; однако он не дал мне желаемого результата - что я получаю в соответствии с изображением ниже, что я делаю неправильно?

<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>

Желаемый результат:

Желаемый результат http://mpasqualone.com/wantedResult.gif

Answer 1

Вы должны плавать изображения.

float: left;

Answer 2

Попробуйте добавить следующий CSS:

table { table-layout: fixed; }

Это запускает «алгоритм фиксированной компоновки таблицы», в котором горизонтальная компоновка зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек.

Помимо решения вашей проблемы, это также повышает производительность: фиксированный макет таблицы позволяет браузерам отображать таблицу быстрее, чем автоматический макет таблицы, поскольку браузер может начать отображать таблицу после получения первой строки.

Answer 3

одна вещь, которую вы пропустили, закройте тег img вот так (и не забудьте alt attr :))

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

Выше код соответствует xhtml

Answer 4

Используйте вот так для желаемого результата:

<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>