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.

Answer 2

像这样修改HTML：

<table class="box-left">
    <thead>
        <tr>
            <th class="lightgreen">Test</th>
        </tr>
    </thead>
    <tr>
        <td>
            <div id="floated">
                <img src="../images/54.jpg" width="80" height="140" style="position: relative;" />
            </div>
            Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
            Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
            Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
        </td>
    </tr>
</table>

并将其添加到CSS：

#floated{
    float: left;
}

检查此JSFiddle：http://jsfiddle.net/jhts4hxe/3/

如何对齐图像和文本

2 个答案: