0

我已经对 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>

虽然这个答案有助于演示如何实现行跨度，但我无法对其进行定制以使这种类型的垂直对齐工作。任何帮助将不胜感激。

4

1 回答 1

1

好的，现在明白了：

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>
            <div id="contentdiv">
            Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>Lots o' Details
            <br>
            <hr>
            </div>
        </div>
    </div>

代码：

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

希望有所帮助。

于 2013-01-23T11:50:49.850 回答