2

基本的に、ボックスのグリッドを作成できるようにしたいのですが、各ボックスの上部中央と下部にテキストを配置し、同じ行の別のボックスのテキストが押し下げられたときに、同じ行のボックスのサイズを変更できます。

このHTML4コードを見ると、私がやりたいことは達成されていますが、XHTML1.0のDoctypeでこれを達成できるようにしたいと考えています。

<style type="text/css">
<!--
#apDiv1 {
        width:200px;
        height:100%;
            border:1px solid #000;
}

#apDiv1 table{
        width:200px;
        height:100%;
            border:1px solid #000;
}
-->
</style>
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf</p>
          <p>h</p>
          <p>dfh</p>
          <p>df</p>
          <p>h</p>
<p>&nbsp;</p></td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf          </p>
          <p>&nbsp;</p></td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
</table>
</div>
4

2 に答える 2

1

で CSSを使用してグリッドを実現するクロスブラウザーの方法がありdisplay:inline-blockますが、希望するほど柔軟ではない可能性があります (また、Firefox 2 をサポートしたい場合、コードはかなり醜いです)。

「XHTML」で発生する可能性のある問題は、IE5 バグ (DOCTYPE を使用しないか、古い/不完全なものを使用した場合に発生する) のエミュレーションを行わない CSS では、使用できるタイミングが制限されることですheight:100%

auto親要素に高さがあり、デフォルトでほとんどすべての HTML 要素に自動高さが設定されている場合、パーセント単位の高さは機能しません。テーブルのすべての親要素に明示的な高さを設定する必要があります。

html,body,#apDiv1 {
  height:100%;
}
于 2009-06-07T18:34:01.850 に答える
0

まず、ドキュメントの DOCTYPE を HTML 4.01 strict にし、 http: //validator.w3.orgを使用して最初に検証します。

次に、DOCTYPE を次のように変更できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

その後、再検証します。問題がある場合、または動作が異なる場合は、ここで特定の質問について尋ねることができます。

于 2009-06-03T07:42:52.033 に答える