css - 如何将 div 与表格的右侧对齐？

Question

我有这样的结构:

<table id="A">
...
</table>
<div id="B">some lefty text</div>
<div id="C">some righty text</div>

我需要的是将 B 与表格的左边缘对齐，并将 C 与其右边缘对齐，这样我就可以得到:

AAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAA
BBBBBB               CCCC

我对如何在 CSS 中执行此操作感到困惑。我已经尝试将 C 向右浮动，但这会将 C 置于整个窗口的右侧，而不是与表格的右侧对齐，即使我将所有内容都包含在外部 DIV 中也是如此。

没有一个元素是固定大小的，但是可以合理地假设内容 B 的宽度与内容 C 的宽度之和小于内容 A 的宽度。(即图表是合理的内容布局)。该解决方案需要在 IE8+ 中运行。

Answer 1

将表格包裹在一个div中，然后让div float

jsFiddle example

HTML

<div id="wrapper">
    <table id="A">
        <tr>
            <td>table</td>
        </tr>
    </table>
    <div id="B">some lefty text</div>
    <div id="C">some righty text</div>
</div>

CSS

table, div {
    border:1px solid #999;
}
table {
    width:100%;
}
#B {
    float:left;
}
#C {
    float:right;
}
#wrapper {
    width:50%;
}