-1

这是一个两部分的问题，我已经在多个标签下搜索以找到无济于事的答案。

我有一个包含 4 列和 4 个块的表格，我试图让它们在页面加载时自动对齐，以便四列占据页面底部的整个宽度。无论用户是在 22" 宽​​屏幕还是 15" 屏幕上，我都希望它看起来一样：

  1. 这最好由 JavaScript 完成，还是有更有效的方法？
  2. 您将如何实现这一目标？

编辑：对不起，我应该更具体，这是我的代码：

    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
                <tbody>
                    <tr>
                        <td align="right" valign="top" id="col-1">
                            <div id="nugget1" align="right" style="height: 459px;">
                                <div id="nugget1-content" align="left">
                                    <h2 class="menutitle"> FAQ's </h2>

                                </div> 
                            </div>
                        </td>
                        <td valign="top" id="col-2">
                            <div id="nugget2" align="center" style="height: 459px;">
                                <h2 class="menutitle"> Contacts </h2>
                            </div>
                      </td>                                    
                      <td valign="top" id="col-3">
                            <div id="nugget3" align="center" style="height: 459px;">
                                 <h2 class="menutitle"> Calendar </h2>
                                    <ul class="vertmenu">  
                                        <li>
                                            <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
                                        </li>
                            </div>
                        </td>
                        <td valign="top" id="col-4">
                             <div id="nugget4" align="center" style="height: 459px;">
                                 <h2 class="menutitle"> Mail </h2>
                             </div>
                      </td>

                  </tr>
                </tbody>
             </table>
4

4 回答 4

0

假设金块是一个表格单元格，这可能就是您要查找的内容：

  1. 这听起来像是 CSS 的工作。

  2. 相关CSS：

    表{宽度：100%；}

于 2013-03-04T17:04:53.030 回答
0

valign除非您使用这种过时的 HTML（用于布局的表格、HTML 中的和之类的使用等）有特殊原因，否则align实现您想要的最有效（关于页面加载）的方法是重组您的HTML 到更多类似于以下内容的内容：

<div id="nuggets">
  <div id="nugget1">
    <h2 class="menutitle"> FAQ's </h2>
  </div> 
  <div id="nugget2" class="col">
     <h2 class="menutitle"> Contacts </h2>
  </div>
  <div id="nugget3">
     <h2 class="menutitle"> Calendar </h2>
     <ul class="vertmenu">  
       <li>
         <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
       </li>
  </div>
  <div id="nugget4">
    <h2 class="menutitle"> Mail </h2>
  </div>
</div>

然后，您可以按照以下方式使用 CSS：

#nuggets {
  height: 459px;
}

#nuggets > div {
  width: 25%;
  height: 459px;
  float: left;
  text-align: center;
}
于 2013-03-04T17:30:27.707 回答
0

您可以尝试将表格宽度设置为与屏幕分辨率相对应，也许使用这个？

<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>
于 2013-03-04T17:06:35.307 回答
0

如果您<table>为表格使用实际的 HTML 标记，那么最简单的方法是使用<colgroup>标记。

在您的情况下，代码将是：

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
    <colgroup width="25%" />
    <tbody>
        <tr>
            <td align="right" valign="top" id="col-1">
                <div id="nugget1" align="right" style="height: 459px;">
                    <div id="nugget1-content" align="left">
                        <h2 class="menutitle"> FAQ's </h2>
                    </div> 
                </div>
            </td>
            <td valign="top" id="col-2">
                <div id="nugget2" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Contacts </h2>
                </div>
            </td>                                    
            <td valign="top" id="col-3">
                <div id="nugget3" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Calendar </h2>
                    <ul class="vertmenu">  
                        <li>
                            <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
                        </li>
                </div>
            </td>
            <td valign="top" id="col-4">
                <div id="nugget4" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Mail </h2>
                </div>
            </td>
        </tr>
    </tbody>

中的任何属性都<colgroup>将应用于该组中的所有列。如果您想对任何单独的列进行特定的样式设置，您可以<col>在每个列中添加标签<colgroup>来定义它们。您还可以<colgroup>将标签相互嵌套。

于 2013-03-04T17:21:13.680 回答