0

幅が 100% の親内に 2 つの div (動的な幅) を並べて配置しようとしています。divの1つの中にネストされたテーブル（100％でも）があることに遭遇するまでは難しくありません。

私が欲しいもの:
#parent幅 100%
#right内のコンテンツによって引き起こされる自動幅
#left「#right」から残った空のスペースのボイドを埋める 「#left」
tableの 100% 幅

問題:
以下の例でわかるように、div を並べて表示することはできますが、テーブルを「#left」の 100% にすることはできません。代わりに、「#parent」の下に移動します。

例:
http://jsfiddle.net/MHWQT/

コード：

html

<div id="parent">

    <div id="right">RIGHT!</div>

    <div id="left">
        <table>
            <tr>
                <th>Header</th>
                <th>Also Header</th>
            </tr>
        </table>
    </div>

</div>

CSS

#parent {
    width: 100%;
    height: 300px;
}

#right {
    float: right;
    width: auto;
    height: 100%;
}

#left {
    width: 100%;
    height: 100%;
}

table {
    width: 100%;
}

画面が特定の幅を下回ったときに @media プロパティを使用して内部のすべてを変更することを忘れてい
た回答へのリプレイを編集します。だから私は現在のhtml構造を維持したいと思います
#parent

4

4 に答える 4

0 
<table id="parent">
   <tr>
     <td id="left">
        <table id="table">
          <tr>
            <th>Header</th>
            <th>Also Header</th>
          </tr>
        </table>
      </td>
    <td id="right">RIGHT!</td>
  </tr>
</table>

そして、テーブルのcssを次のように変更します。

#table {
    width: 100%;
    background: rgba(255, 255, 0, 0.1);
}

</ p>

于 2012-09-11T17:12:54.430 に答える
0

css でテーブル幅を削除し、jQuery を含めてから、これを含めます。

$(document).ready(function(){
   var new_width = $("#parent").width() - $("#right").width();

   $("table").first().css("width", new_width);

});​
于 2012-09-11T17:44:42.170 に答える
0

私がCSSを扱っていたのは久しぶりでした。ただし、まず、コード ブロックleftの上に divを配置する必要があります。rightHTMLとCSSは順番に（私の知る限り）

もう1つ、左側のブロックで達成しようとしていることは、JavaScriptが機能する必要があります。left最初にテーブルのコンテンツを取得し、ロード時にコンテンツのサイズに応じてブロックのサイズを変更する必要があります。

ページ読み込みのライフサイクルを見て、どの部分が最初にレンダリングされるかを確認することをお勧めします。

ワーキング編集：

私はあなたのコードで遊んで、このコードブロックが「縮小して合わせる」機能を提供すると考えました。

HTML:

<div id="parent">
    <div id="right">sdfdsfdsfdsfsdf</div>
    <div id="left">
        <table>
            <tr>
                <th>Header</th>
                <th>Also Header</th>
            </tr>
        </table>
    </div>
</div>

CSS:

#parent {
    width: 100%;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
}

#right {
    float:right;
    width:auto;
    height: 100%;
    background: rgba(0, 0, 255, 0.1);
    display:inline-block;
    text-align:center;
}

#left {
    height: 100%;
    background: rgba(0, 255, 0, 0.1);
    width:100%;
}

table {
    width:300px;
    background: rgba(255, 255, 0, 0.1);
}
于 2012-09-11T17:05:05.810 に答える