“如何制作XHTML”；表「；具有流动表行_Html_Css_Layout_Quirks Mode

“如何制作XHTML”；表「；具有流动表行

html css layout

“如何制作XHTML”；表「；具有流动表行,html,css,layout,quirks-mode,Html,Css,Layout,Quirks Mode,基本上，我希望能够制作一个方框网格，在这个网格中，我可以对齐每个方框顶部、中间和底部的文本，并在同一行的另一个方框中的文本向下推时调整同一行的方框大小如果您看一下这个HTML4代码，它实现了我想要实现的功能，但是我希望能够通过XHTML1.0doctype实现这一功能 <style type="text/css"> <!-- #apDiv1 { width:200px; height:100%; border:1px s

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

如果您看一下这个HTML4代码，它实现了我想要实现的功能，但是我希望能够通过XHTML1.0doctype实现这一功能

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


废话
废话
废话
废话
废话
dfhdf
h
dfh
df
h

废话
废话
废话
废话
废话
废话
dfhdf

废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话

首先，使文档的DOCTYPE为HTML4.01 strict，并使用

然后，您可以将DOCTYPE更改为

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

然后重新验证它。如果有任何问题或行为不同的事情，您可以在这里询问具体问题。

有一个带有

显示：inline block

，但是它可能没有您希望的那么灵活（如果您想支持Firefox 2，代码非常难看）

“XHTML”可能存在的问题是，没有模拟IE5 bug的CSS（当您不使用DOCTYPE或使用旧的/不完整的bug时会出现这种情况）限制了您何时可以使用

height:100%

如果父元素具有

auto

Height，并且默认情况下几乎每个HTML元素都具有autoheight，则以百分比表示的Height不起作用。必须在表的所有父元素上设置显式高度：

html,body,#apDiv1 {
  height:100%;
}

您的问题根本与XHTML无关。更多的是怪癖模式与标准模式，以及（X）HTML严格模式与（X）HTML过渡模式。此处发布的代码由于设置了高度而无法验证。