当前位置： 文江博客话题详情

如何制作 XHTML“表格” 带有流体表行

发布于 2024-07-23 05:51:44 字数 4003 浏览 10 评论 0原文

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

如果你看一下这个 HTML 4 代码，它实现了我想要做的事情，但我希望能够使用 XHTML 1.0 文档类型来实现这一点。

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

Basically i want to be able to make a a grid of boxes, where i can align text at the top middle and bottom of each box, and have the boxes on the same row resize when text in another box on its row pushes it down.

If you look at this HTML 4 code, it achieves what i want to be able to do, but id like to be able to achieve this with the 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> </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> </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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

荒路情人 2024-07-30 05:51:44

一种使用 CSS 实现网格的跨浏览器方法 和 display:inline-block，但是它可能没有您想要的那么灵活（如果您想支持 Firefox 2，代码会非常难看）。

“XHTML”可能存在的问题是，没有模拟 IE5 错误的 CSS（当您不使用 DOCTYPE 或使用旧的/不完整的类型之一时会出现此错误）限制了您何时可以使用 height:100%< /代码>。

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

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

There's a cross-browser way to achieve grid using CSS with display:inline-block, however it may not be as flexible as you'd like (and code is pretty ugly if you want to support Firefox 2).

The issue you might have with “XHTML” is that CSS without emulation of IE5 bugs (which you get when you don't use DOCTYPE or use one of old/incomplete ones) restricts when you can use height:100%.

Height in percent doesn't work if parent element has auto height, and by default almost every HTML element has auto height. You have to set explicit height on all parent elements of the table:

html,body,#apDiv1 {
  height:100%;
}
回复 原文
如梦 2024-07-30 05:51:44

首先，使您的文档具有严格的 HTML 4.01 的 DOCTYPE 并首先使用 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">

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

first, make your document have the DOCTYPE of HTML 4.01 strict and make it validated first, using http://validator.w3.org

then, you can change the DOCTYPE to

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

and then re-validate it. If there is any problem or things that behave differently, you can ask about the specific question here.

回复 原文
~没有更多了~

关于作者

一杆小烟枪

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

小瓶盖

文章 0 评论 0

wxsp_Ukbq8xGR

文章 0 评论 0

1638627670

文章 0 评论 0

仅一夜美梦

文章 0 评论 0

夜访吸血鬼

文章 0 评论 0

近卫軍团

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文