html - 如何使文本环绕表格，就好像它是图像一样

Question

我很惊讶我找不到解决方案。我想在我的文档顶部附近放置一个小表格（1 行，3 个单元格），向右对齐，并在其周围环绕一个段落，就像您可以使用以下代码处理图像一样...

    <img src="http://www.sorenwagner.ws/marty/img/ca-seal.jpg"
        align="right" width="300" height="100">
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...

能够在表格周围定义填充也是很好的，因此文本不会正好到达边界。在 CSS 中是否有一个相对简单的解决方案？

Answer 1

只需将表格浮动到右侧（这也是您应该定位图像的方式）：

<table style="float: right">
    <!-- ... -->
</table>
<p>Bunch of text...</p>

演示：http: //jsfiddle.net/ambiguous/ZLfg7/1/

Answer 2

jsFiddle

table {
    float: right; /* floats the table to the right,
                     allowing text to wrap around it */
    margin: 12px; /* adds buffer space around the table */
}

Answer 3

使表格向右浮动并通过 CSS 给它一个边距：

table {
    float:right;
    width:300px;
    margin:0 0 10px 10px;
}​

jsFiddle 示例。