CSS Équivalent de Table Rowspan avec la Hauteur du Fluide

Je suis en train d'accomplir les tâches suivantes à l'aide de CSS:

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

CSS Équivalent de Table Rowspan avec la Hauteur du Fluide

Les exemples que j'ai vu pour la réalisation de cet utilisent des hauteurs fixes ou autoriser le contenu à enrouler autour de la colonne de gauche. Est-il un moyen élégant pour accomplir cela en utilisant CSS?

OriginalL'auteur Gabe Sumner | 2010-04-09

  1. 5

    Tout d'abord, ce que vous faites ressemble à une table pour moi, de sorte que vous pourriez envisager. De le faire avec CSS, cependant, est un peu plus compliqué (à moins que vous ne la table de style en CSS). Le code suivant fonctionne mais ne pas centrer verticalement le texte dans la zone:

    <html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

    Les cellules d'un tableau en CSS sont plus faciles:

    <!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>
    C'est assez proche. J'ai remarqué que, par votre exemple, que, lorsque la colonne de gauche contient plus de texte que les 2 colonnes droite combinée que la colonne de droite de ne pas étendre automatiquement à absorber de l'espace supplémentaire. Ce problème existe pour les tables. En tout cas, je vous remercie de votre réponse.
    Vous avez raison. Vous pouvez normalement pas de faire flotter haut dépend d'une autre valeur. Style les trucs comme le tableau pourrait être la meilleure solution qui devrait encore avoir les avantages de la non-utilisation d'un tableau html. Le seul problème est qu'il ne fonctionne pas dans IE<8. Vous pouvez utiliser un conditionnel de la feuille de style pour que (uniquement pris en charge dans IE) qui fait quelque chose d'autre pour IE.

    OriginalL'auteur Paul de Vrieze

  2. 4

    J'avais besoin de quelque chose de très similaire. Malheureusement, toutes ces solutions sont assez complexes, je suis venu avec quelque chose de très simple (peut-être trop simple) -- display: inline-block

    HTML

    <div>
    <span id="v">
        text in the left
    </span>
    <div id="x">
        <div>upper row</div>
        <div>lower row</div>
    </div>
</div>

    CSS

    #x {
    display: inline-block;
    vertical-align: middle;
}

    violon

    v et x sont horrible Id.

    OriginalL'auteur SummerBreeze

  3. 0

    C'est ce que j'utilise:
    http://www.ejeliot.com/samples/equal-height-columns/example-7.html

    Je venais d'utiliser la deuxième colonne comme un wrapper pour les deux autres éléments (moins-sémantique). Que devrait être la façon la plus simple.

    lien mort lien mort

    OriginalL'auteur Kevin Wiskia