第 4 个 Table 未与底部对齐

Question

我正在创建一个小的 HTA 应用程序，我需要使用 table 标记进行布局。因为 HTA 使用旧的 IE 渲染引擎，这是我唯一能让事情正常进行的方法。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="x-ua-compatible" content="IE=9">
        <title>0nurky Hacks</title>
        <link rel="Stylesheet" type="text/css" href="./style.css">
    </head>
<body>
<table id="head">
    <td>#head</td>
</table>

<table id="menu" align="left">
    <td>#menu</td>
</table>

<table id="aside" align="left">
    <td>#aside</td>
</table>

<table id="foot" valign="left">
    <td>#foot</td>
</table>
</body>
</html>

CSS:

body {
    margin:0px;
    padding:0px;
}

table#head {
    background:#000;
    width:100%;
    height:15.5%;
    color:#fff;
}

table#head td {
    padding-left:3%;
    padding-right:3%;
}

table#menu {
    background:gray;
    width:25%;
}

table#aside {
    background:lightgray;
    width:75%;
}

table#foot {
    background:darkgray;
    width:100%;
    height:8.9%;
}

所以基本上，我在每个 table 标签上放置了 align="left" 而不是 table#head。

如您所见，第四个 table 没有与底部对齐，即使它是 width 是 100%，但它向左对齐，触及第三个 table.

~ 我知道人们会说，既然可以通过 node.js 和其他所有方式来完成，为什么还要使用 HTA。 ~ 我正在为我的朋友做这个，是的。

先谢谢大家了。

Answer 1

这是您要找的吗？将第 4 个 table 推到页面底部?

还有align=""

属性定义

align = left|center|right|justify [CI]

Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values:

left: text lines are rendered flush left.

center: text lines are centered.

right: text lines are rendered flush right.

justify: text lines are justified to both margins.

The default depends on the base text direction. For left to right text, the default is align=left, while for right to left text, the default is align=right.

body {
  margin: 0px;
  padding: 0px;
}

table#head {
  background: #000;
  width: 100%;
  height: 15.5%;
  color: #fff;
}

table#head td {
  padding-left: 3%;
  padding-right: 3%;
}

table#menu {
  background: gray;
  width: 25%;
}

table#aside {
  background: lightgray;
  width: 75%;
}

table#foot {
  text-align: center;
  background: darkgray;
  width: 100%;
  height: 8.9%;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="x-ua-compatible" content="IE=9">
    <title>0nurky Hacks</title>
    <link rel="Stylesheet" type="text/css" href="./style.css">
  </head>

  <body>
    <table id="head">
      <td>#head</td>
    </table>

    <table id="menu" align="left">
      <td>#menu</td>
    </table>

    <table id="aside" align="left">
      <td>#aside</td>
    </table>

    <table id="foot" valign="left">
      <td>#foot</td>
    </table>
  </body>

</html>

Answer 2

这很简单。

将此添加到您的 CSS 代码中：

.jump {
    display:inline-block;
    height:25px;
}

...这是你的 HTML 第 4 之前的代码 table:

<div class="jump"></div>

好了，这就是它的样子：

第 4 个 Table 未与底部对齐

4th Table doesn't align to bottom

html

css

internet-explorer

hta

Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values: