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

How to make text wrap around a table, as if it were an image

提问by Soren Wagner

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

我很惊讶我找不到解决方案。我想在我的文档顶部附近放置一个小表格（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...

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 中有一个相对简单的解决方案吗？

回答by mu is too short

Just floatthe 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/

回答by gmeben

jsFiddle

js小提琴

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

回答by j08691

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 示例。