2

基本上，我希望能够制作一个框格，我可以在其中对齐每个框的顶部中间和底部的文本，并且当同一行中的另一个框中的文本将其向下推时，使同一行上的框调整大小。

如果您查看此 HTML 4 代码，它实现了我想要能够做的事情，但我希望能够使用 XHTML 1.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 with来实现网格display:inline-block，但是它可能不像你想要的那样灵活（如果你想支持 Firefox 2，代码会非常难看）。

“XHTML”可能存在的问题是，没有模拟 IE5 错误的 CSS（当您不使用 DOCTYPE 或使用旧的/不完整的错误之一时会得到）限制了您何时可以使用height:100%.

如果父元素具有高度，则百分比高度不起作用auto，并且默认情况下，几乎每个 HTML 元素都有自动高度。您必须在表格的所有父元素上设置显式高度：

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

首先，使用http://validator.w3.org使您的文档具有 HTML 4.01 严格的 DOCTYPE 并首先对其进行验证

然后，您可以将 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 回答