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

<强> 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%;
}

Answer 2

将所有三个内容包装在一个容器中并给它display: inline-block，使其缩小以适合其内容的宽度（给定描述这将是表的宽度）。

执行此操作后，您描述的float解决方案将按预期工作。

<强> See it in action

Answer 3

尝试在div周围使用包装器。

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

将Wrap大小设置为您希望整个表格的大小，并将表格设置为100％用500px宽度的表来说，它会像这样：

#wrap {
position: relative;
width: 500px;
}

table {
position: relative;
width: 100%;
}

#a{
float: left;
}

#b{
float: right;
}

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

3 个答案: