5

バーのあるテーブルがあります。display: table-cell内容を一番下に揃えるために使用します。問題は、コンテナdivが対応するsに対して水平に整列しなくなったことTHです（幅が設定されていません）

これが問題を示すjsFiddleです

4

2 に答える 2

3

問題

-attributeを使用する場合の問題table-cellは、「実際のテーブルセル」のように動作し、block-またはinline-elementのようには動作しないことです。親要素table-rowとtableが欠落している場合、それらは匿名で生成されます。したがって、ボックスはのようなすべてのものを失いますmargin。

これについて詳しくは、 「ビジュアルフォーマットモデルのテーブル」をご覧ください。

HTML構造を少し再構築しましたが、これは正常に機能しているようです。

デモ

http://jsfiddle.net/insertusernamehere/XPSQG/

CSS

<style>

    #graph th {
        background:         red;
    }

    #graph td {
        min-width:          30px;
        margin:             0;
        padding:            0;
        color:              #222222;
    }

    #graph div {
        display:            block;
        position:           relative;
        margin:             0 auto;
        width:              30px;
        max-width:          30px;
        height:             100px;
        background-color:   #EFEFEF;
        border:             1px solid #000000;
    }

    #graph span {
        position:           absolute;
        left:               0;
        top:                -20px;
        width:              100%;
        color:              #222222;
        font-size:          16px;
        line-height:        16px;
        text-align:         center;
    }

    #graph p.color {
        position:           absolute;
        right:              0;
        bottom:             0px;
        width:              100%;
        margin:             0;
        color:              #222222;
    }

    #graph p.color.c1 {
        background:         #0f0;
    }

    #graph p.color.c2 {
        background:         blue;
    }​

</style>

HTMl

<div id="graph">
    <table>
        <tr>
            <td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
            <td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
            <td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
            <td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>Some long value</th>
        </tr>
    </table>
</div>

使い方

<p>基本的に、列の内容（緑色のパーセンテージタグ）を下部に配置します。その上に番号を付けるには、-タグ内に簡単に配置して、<p>再び「移動」することができます。これはこの部分によって行われます：

top:                -20px;
font-size:          16px;
line-height:        16px;

これは、行の高さとフォントサイズが16pxであることを示しています。それを完全に移動するように設定top: -16pxするだけで十分です-追加の4pxは素晴らしいパディングを追加します。:)

あなたがアイデアを得ることを願っています。

ノート

この属性を使用した場所：

countunit="0_1_0"

これは有効なHTMLではないため、data-prefixを使用してください。

data-countunit="0_1_0"

これは有効なHTML5であり、古いブラウザでも問題は発生しません。

于 2012-07-17T15:01:03.037 に答える
1

別の要素の内側にあるテーブルセルという表示を使用して、要素を水平方向に中央揃えにするトリックがあります。

周囲の要素にクラス.table-wrapperがあり、内側の要素に.table-cellがあるとします。次のCSSを使用します。

.table-wrapper {
  display: table;
  width: 100%;
  text-align: center;
}
.table-cell {
  vertical-align: middle;
}

このようにして、テキストまたは必要なものを.table-cell内で垂直方向および水平方向に中央揃えにします。

于 2015-02-17T09:33:21.737 に答える