如何使文本绕着一个表，就像它是一个图像一样

I'm surprised I couldn't find a solution to this. I would like to position a small table (1 row, 3 cells,) near the top of my document, aligned to the right, with a paragraph wrapping around it, just as you can do with an image with the following code...

我很惊讶我找不到解决办法。我想把一个小表格(一行，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...

It would be nice as well to be able to define padding around the table, so the text is not right up to the border. Is there a relatively simple solution for this in CSS?

最好能够在表周围定义填充，这样文本就不会直接到达边框了。在CSS中有相对简单的解决方案吗?

3 个解决方案

#1

Just float the table to the right (which is how you should be positioning the image as well):

只需将表格浮动到右边(这就是如何定位图像的方法):

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

Demo: http://jsfiddle.net/ambiguous/ZLfg7/1/

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

#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 */
}

#3

Float the table right and give it a margin via CSS:

向右浮动表格，并通过CSS给它一个空白:

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

jsFiddle example.

jsFiddle例子。

#1