11

..列の高さが別の列の高さに依存している場合は? ソリューションは、少なくとも IE6、7 および Mozilla で動作するはずです。

HTML テーブル レイアウト:

+------------------------+----------------------------------+
 | | 上揃えの段落 | ここ |
 | | | | | です。
 | | | | とても |
 | | | | 長い |
 | | | | テキスト |
 | | | | それ |
 | | | | 最終的に |
 | | | | を決定します |
 | | | | 全体 |
 |下揃えの段落| テーブルの高さ。| |
 +------------------------+----------------------------------+
4

3 に答える 3

11

最も簡単な方法はvertical-align、整列させたいセルで上下を使用することです。

<table>
<tr>
<td class="top">
<p>Top aligned paragraph</p>
</td>
<td rowspan="2">
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p>
</td>
</tr>
<tr>
<td class="bottom">
<p>Bottom aligned paragraph</p>
</td>
</tr>
</table>

そしてCSS：

.top{
vertical-align:top;
}
.bottom{
vertical-align:bottom;
}

コピー|貼り付け

于 2009-01-17T10:49:37.070 に答える
3

rowspan 属性 ( http://www.htmlcodetutorial.com/tables/index_famsupp_30.html ) を使用して、長いテキスト (column2) を 2 つの行にまたがるようにします。次に、Para1 を最初の列の最初の行 (上に揃える) に配置し、次に Para2 を最初の列の 2 番目の行 (下に揃える) に配置します。

--------------------------------------
|Para 1 Align Top |This is your very |                   
|                 |long text.  This  |
|                 |is your very long |
|_________________|text.             |
|                 |This is your very |
|                 |long text.  This  |
|                 |is your very long |
|Para2 align bottm|Text.             |
--------------------------------------
于 2009-01-17T13:52:46.030 に答える
2

テーブルを使用したくない場合は、次のようにすることができます。

<style type="text/css" media="screen">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .right {
        width: 50%;
        margin-left: 50%;
        background-color: #F88;
    }
    .top,
    .bottom {
        position: absolute;
        width: 50%;
    }
    .top {
        top: 0;
        background-color: #8F8;
    }
    .bottom {
        bottom: 0;
        background-color: #88F;
    }
</style>

<div class="outer">
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div>
    <div class="top">top-aligned paragraph</div>
    <div class="bottom">bottom-aligned paragraph</div>
</div>
于 2009-01-17T11:46:56.080 に答える