0

私はCSSテーブルについて多くの調査を行い、CSSだけで行スパンのような効果を作成しました。それが可能であることはわかっていますが、これまでのところ、探しているものを実現する方法を示すものはありません。従来のテーブルを使用せずにCSSだけで特定の構成が可能かどうか、またはそれを実現するためにJavascriptが必要かどうかを知りたいだけです（これは避けたいと思っています）。

2つの列が必要です。1つの行がテーブルの高さ全体に広がり、コンテンツが垂直方向に中央に配置されている左側の列と、2つの行がある右側の列（一番上の行は短く、一番上に垂直に配置されます）と下の行は長く、中央に垂直に配置されたコンテンツが含まれます。左の列/行には大量のコンテンツが含まれ、右端の列が引き伸ばされ、右の列の2番目の行の中央揃えが可能になります。

また、私は従来のテーブルを使用することを不合理に恐れている人ではないことにも注意する必要があります。私のプロジェクトでは、残念ながら他の理由でCSSテーブルが必要です。

以下は、テーブルを使用した例へのリンクで、私が達成しようとしていることと、これまでに思いついた欠陥のあるCSSテーブルを示しています。重要な側面は、右側の列の2つの行の垂直方向の配置です。現在、タイトルは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>

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を更新します...

その助けを願っています。

于 2013-01-23T11:50:49.850 に答える