Wie vertikal ausrichten einer Tabelle Spalte oben und unten?

..wenn die Säulen-Höhe ist abhängig von der Höhe der anderen Spalte?
Die Lösung sollte auf dem IE6,7 und Mozilla zumindest.

HTML-Tabellen-layout:

 +------------------------+----------------------+ 
| nach oben ausgerichtet Absatz | Hier | 
| | ist eine | 
| | sehr | 
| | lange | 
| | text | 
| | dass | 
| | schließlich | 
| | bestimmt | 
| | die gesamte | 
|unten ausgerichteten Absatz - | Tisch-Höhe. | 
+------------------------+----------------------+
InformationsquelleAutor | 2009-01-17
  1. 9

    Der einfachste Weg sollte sein, verwenden Sie einfach vertical-align oben und unten in die Zellen, die Sie ausrichten möchten:

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

    und dann die CSS:

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

    Copy|Paste entfernt

    • Wollte nur hinzufügen, meine 5 Cent. In einigen Versionen von Odoo(zum Beispiel Odoo 9.0) mit der "valign", aber mit "vertical-align" wird die Arbeit machen. Danke für den Kommentar
    InformationsquelleAutor Jayx
  2. 2

    Wenn Sie nicht möchten, verwenden Sie Tabellen, die Sie tun könnten, so etwas wie dieses:

    <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>
    InformationsquelleAutor Gumbo
  3. 2

    Verwenden Sie das rowspan-Attribut (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) machen den langen text (spalte2) erstreckt sich über zwei Zeilen. Setzen Sie dann die Para1 in der ersten Spalte der ersten Zeile (oben ausrichten), dann Para2 in der ersten Spalte der zweiten Zeile (unten ausrichten).

    --------------------------------------
|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.             |
--------------------------------------
    InformationsquelleAutor Drell
Schreibe einen Kommentar