-1

バーからの飲酒者とその飲み物の結果を反映するために、2つの別々のテーブルを作成しようとしています。

テーブルには、nth-child（odd）、nth-child（even）を使用して背景が交互に表示されます。これは正常に機能しています。さまざまなブラウザで整列させ、角を丸くするだけです。

nth-last-child（1）.. etcを使用してみましたが、それでも適切な解決策はありません。

これが私が今のところいるところです 。http： //giblets-grave.co.uk/index3.php

これがその内容です：http： //giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg

/css/main2.cssで私の現在のcssを見てください

4

1 に答える 1

0

私はあなたのコードを見ていませんが、私は同様のシナリオをモックアップしました。

HTML

<div id="main">
    <div id="first">
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
    <div id="second">
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </div>
</div>

ご覧のとおり、2番目のテーブルの高さは「動的」であり、最初のテーブルより長くなる可能性があります。

CSS

#main {
    width:500px;
    overflow:hidden;
}
#first, #second {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    float: left;
}
#first {
    float:left;
    width:100px;
    overflow:auto;
}
#second {
    width:400px;
    float:left;
}

これまでのところ、あなたが持っているのは、＃secondの高さを追跡する#firstの親です。参照

フィドル

ならどうしよう？#firstは#secondの高さに従いますが、＃first_childは#firstの高さに従いません。ただし、HTMLテーブルは親のdivの高さに従わない。参照

回答：Javascripts。

最初に#secondの高さを検出してから、＃first_childの高さを自動調整して#secondの高さに追従させます。

var second_height = $("#second").height();
var table_height = second_height;

$("#first_child").height(table_height);

解決

これがあなたが探しているものであることを願っています。

于 2013-02-20T02:10:03.933 に答える