html - 如何对齐图片和文字

Question

我有这样定义的表格:

  <style>
table.box-left, table.box-left td, table.box-left th {
            border: 1px solid #005a8c;
            border-collapse: collapse;
            width: 320px;
            box-shadow: 1px 1px 1px #888888;
            margin-bottom: 5px;
        }
            table.box-left thead tr .lightgreen {
                height: 20px;
                background-color: #8DB135;
            }
 </style>

在表格单元格中，我有一张图片和一段文字，出于某种原因，文字没有环绕在图片周围。有人可以帮忙吗？？？？？

<table class="box-left">
                            <thead>
                                <tr>
                                    <th class="lightgreen">Test</th>
                                </tr>
                            </thead>
                            <tr>
                                <td>

                                     <img src="../images/54.jpg" width="80" height="140" />

                                   Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
                                </td>
                            </tr>
                        </table>

Answer 1

只需添加 img { float: left; } 它应该按预期工作。

Check this fiddle.