13

私は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 を使用してこれを実現するエレガントな方法はありますか?

4

3 に答える 3

5

まず第一に、あなたがしていることは私にはテーブルのように見えるので、それを考慮したいかもしれません. ただし、CSS でそれを行うのは、もう少しトリッキーです (CSS でテーブルのスタイル設定を行う場合を除きます)。次のコードは機能しますが、ボックス内のテキストを垂直方向に中央揃えにしません。

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

CSS のテーブル セルはより簡単です。

<!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>
于 2010-04-09T22:50:36.917 に答える
-1

これは私が使用するものです: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

2 番目の列を他の 2 つの要素のラッパーとして使用するだけです (あまりセマンティックではありません)。それが最も簡単な方法です。

于 2010-04-09T21:37:11.830 に答える