8

テーブルセルの上隅に要素を配置する必要があり、テキストは下にスタックする必要があります。私はvertical-align：bottomを使用してすべてのテキストを下に移動しましたが、テーブルセルは相対的な配置をサポートしていないため、top要素に問題があります...これをどのように行うことができますか？ 

<div style = "display: table-cell; vertical-align: bottom">
    <div class = "top"> Top corner</div>
    <h2> some text in the bottom </h2>
    <h3> some more text in the bottom </h3>
</div>

編集：それはこのように見えるはずです

+-----------+   +-----------+  +------------+
|top text   |   |top text   |  |top text    |
|           |   |           |  |            |
|some long  |   |           |  |            |
|text       |   |           |  |            |
|more long  |   |           |  |            |
|text       |   |           |  |            |
|end of     |   |           |  |some text   |
|text       |   |text       |  |text        |
|<button>   |   |<button>   |  |<button>    |
+-----------+   +-----------+  +------------+

これはすべて、display：tableを使用してdivにラップされています。ここでdisplay：table-cellを使用する理由は、これらの列を同じ高さに保ち、列内のさまざまな長さのテキストに対応できるように柔軟にするためです。

4

2 に答える 2

3

http://jsfiddle.net/Hwvd5/

基本的に私がしたことは、フルサイズのラッパー div をそれに入れることでしたposition: relative。これがクロスブラウザで動作することを願っています。クロムでのみテストされています...

このアプローチの問題点: コンテンツに一致する列の高さをブラウザに自動的に選択させることができず、列が重ならないようにすることができません。:(これを修正する方法は考えられませんでした。

JSFiddle のファイル

<br /> <br />

<div class="table">
    <div>
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
        First cell  <br />    
    </div>
    <div>
        <div class="wrapper">
          <div class = "top"></div>
          <h2> some text in the top </h2>
          <h3> some more text in the bottom </h3>
        </div>
    </div>
</div>

CSS:

.top {
    position: absolute;        
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: red;
}

h3 {
    position: absolute;
    bottom: 0;    
}

.table {
    display: table-row;
}

.table > div {
    display: table-cell; 
    vertical-align: bottom; 
    border: 1px solid black; 
    padding: 10px; 
    height: 200px;   
}

.table > div > div.wrapper {
    position: relative; 
    width: 100%; 
    height: 100%;   
}​
​
于 2012-11-11T01:12:29.737 に答える
2

これをに追加します<td>：

style="vertical-align:top"
于 2016-07-27T11:46:18.853 に答える