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 を右に浮動させようとしましたが、外側の DIV ですべてを囲んでもテーブルの右側に配置されるのではなく、C がウィンドウ全体の右側に配置されます。

どの要素も固定サイズではありませんが、コンテンツ 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

3 つのコンテンツすべてをコンテナーにラップし、コンテンツ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 -->

ラップ サイズをテーブル全体に設定し、テーブルを 100% に設定します。幅 500 ピクセルのテーブルでは、次のようになります。

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

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

#a{
float: left;
}

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