-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>

如您所见，第二张桌子的高度是“动态的”，它可能比第一张桌子长，没关系。

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

到目前为止，您所拥有的是 #first 父级跟随 #second 的高度。参考

小提琴

所以现在怎么办？#first 遵循#second 的高度，但#first_child 不遵循#first 的高度。但是，HTML 表格不遵循父 div 的高度。参考

答案：Javascript。

您首先要检测#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 回答