0

我有这样的结构：

<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+ 中运行。

4

3 回答 3

3

将表格包裹在 div 中，然后浮动 div

jsFiddle 示例

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%;
}
于 2013-09-07T23:17:18.803 回答
2

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

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

看到它在行动。

于 2013-09-07T23:16:25.260 回答
1

尝试在您的 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% 假设使用 500 像素宽度的表格，它会是这样的：

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

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

#a{
float: left;
}

#b{
float: right;
}
于 2013-09-07T23:20:48.960 回答