Question

我已经对CSS表进行了大量的研究，并且仅使用CSS创建了类似行的效果，虽然我知道它是可能的，但到目前为止我发现的任何内容都没有展示如何实现我正在寻找的东西。我只是想知道我的特定配置是否可以单独使用CSS而不使用传统表，或者它是否需要Javascript来实现（我希望避免）。

我想要两列：左列，一行跨越表的整个高度，其内容垂直居中，右列有两行 - 顶行短，垂直对齐顶部，底行很长，内容与中心垂直对齐。左列/行将包含大量内容，可以拉伸最右边的列，并使右列中的第二行居中。

我还要注意，我不是那些非常害怕使用传统表格的人之一，即使这看起来很像。不幸的是，我的项目出于其他原因调用CSS表。

下面是一个示例的链接，使用表格展示了我想要实现的目标，以及迄今为止我提出的有缺陷的CSS表格。关键方面是右列上两行的垂直对齐 - 目前标题通过Javascript与顶部对齐，但我想知道是否有办法用CSS表（并且不使用绝对值）定位，因为我希望标题的高度影响它下面的行）。右列底行的内容高度可变且未确定。

目标：

http://jsfiddle.net/VCGAK/4/

这就是我想出的全部内容：

http://jsfiddle.net/5mvrg/

CSS：

#thetable {
    display:table;
    width:100%;
}
#tablerow {
    display:table-row;
}
#main-content {
    border:1px solid #000;
    width: 40%;
    left:0;
    position:relative;
    display: table-cell;
    vertical-align:middle;
    padding-right:25px;
    z-index:1000;
    text-align:center;
}
#titlediv {
    border:1px solid #000;
}
#main-sidebar {
    border:1px solid #000;
    width: 60%;
    vertical-align:middle;
    display: table-cell;
    height: 100%;
    position:relative;
    padding-right: 15px;
    margin:0px auto;
    z-index:1000;
}

HTML：

<div id="thetable">
    <div id="tablerow">
        <div id="main-content" <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
        </div>
        <div id="main-sidebar">
            <div id="titlediv">Title is currently aligned to top via Javascript</div>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
        </div>
    </div>

尽管this answer有助于演示如何实现行窗口，但我无法定制它以使这种类型的垂直对齐工作。任何帮助将不胜感激。

Answer 1

好的，现在明白了：

HTML CODE：

<div id="thetable">
    <div id="tablerow">
        <div id="main-content" <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
            <p>LALALALALA</p>
        </div>
        <div id="main-sidebar">
            <div id="titlediv">Title is currently aligned to top via Javascript</div>
            <div id="contentdiv">
            Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
            </div>
        </div>
    </div>

CSS代码：

body, td, th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
}
body {
    background-color:#652739;
    color:#CCC;
}
#thetable {
    width:90%;
    max-width:1180px;
    min-width:750px;
    position:relative;
    margin:0px auto;
}
#thetable, #thetable tr td {
    border:1px solid #000;
}
#leftcell {
    width:40%;
    text-align:center;
}
#titlecell {
    padding-left:50px;
    width:60%;
    vertical-align:top;
    height:200px;
}
#detailscell {
    padding-left:80px;
    width:60%;
    padding-right:15px;
    vertical-align:middle;
    height:300px;
}

我也更新了你的jsfiddle ...

希望有所帮助。

Rowspans和垂直对齐CSS表中的顶部和中心

1 个答案: