如何使两列高度相同 - Zurb INK答案

【问题标题】：How to make two columns same height - Zurb INK如何使两列高度相同 - Zurb INK
【发布时间】：2014-08-08 14:23:43
【问题描述】：

我有两列，一列内容更多 = 更大，但我希望黑色的列与右侧的高度相同。

有一种解决方法是在表格宽度高度 100% 附近添加 div 并显示：inline-block，但这是一个丑陋的 hack。

有人知道解决办法吗？

<table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>

            <table class="container">
              <tr>
                <td>

                <table class="row">
                  <tr>
                    <td class="wrapper">

                      <table class="six columns" style="background-color: black; color: white;">
                        <tr>
                          <td align="center" style="vertical-align: middle;">
                            <center style="vertical-align: middle; color:white;">
                              TEXT
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                    <td class="wrapper last">

                      <table class="six columns" style="background-color: lightgray; color: white;">
                        <tr>
                          <td align="center">
                            <center>
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
            </td>
        </tr>
    </table>

【问题讨论】：

标签： css zurb-ink

【解决方案1】：

CSS 类是您所需要的。如果您只是希望表格高度相同，只需将它们的高度设置为相同即可。无论是在线还是以更容易管理的方式，都可以作为一个应用于它们的类，如下所示。我还将您的内联代码添加为 css，因为它是一种更好的方法。

    <html>
<head>
<style type="text/css">
.tableHeight{
  height: 500px;

}

#lefttable{
  background-color: black;
  color: white;"

}

#rightTable{
  background-color: lightgray;
  color: white;
}

</style>

</head>
<body>
<table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>

            <table class="container">
              <tr>
                <td>

                <table class="row">
                  <tr>
                    <td class="wrapper">

                      <table id="leftTable" class="six columns tableHeight">
                        <tr>
                          <td align="center" style="vertical-align: middle;">
                            <center style="vertical-align: middle; color:white;">
                              TEXT
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                    <td class="wrapper last">

                      <table id="rightTable" class="six columns tableHeight">
                        <tr>
                          <td align="center">
                            <center>
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                                TEXT</br />
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>

                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
            </td>
        </tr>
    </table>
    </body>
    </html>

【讨论】：

它反应灵敏，所以我认为我不想设置固定高度
但它仍然是最好的，我认为只能回答，谢谢：]