Fatal编程技术网
  • css/
  • Css 如何使两列的高度相同-Zurb墨水

Css 如何使两列的高度相同-Zurb墨水

css

Css 如何使两列的高度相同-Zurb墨水,css,zurb-ink,Css,Zurb Ink,我有两列，一列有更多的内容=更大，但我希望黑色的一列和右边的一样高 有一种解决方法，可以在表格宽度高度100%和display:inline块周围添加div，但这是一种难看的方法 有人知道答案吗 <table class="body"> <tr> <td class="center" align="center" valign="top"> <center> <

我有两列，一列有更多的内容=更大，但我希望黑色的一列和右边的一样高

有一种解决方法，可以在表格宽度高度100%和display:inline块周围添加div，但这是一种难看的方法

有人知道答案吗

<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类是您所需要的。如果您只是希望两张桌子的高度相同，只需将它们的高度设置为相同即可。无论是以联机方式还是以更容易管理的方式，都是作为一个类应用于它们，如下所示。我还将您的内嵌代码添加为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>
它反应灵敏，所以我想我不想要固定的高度，但它仍然是最好的，我想唯一的答案是，谢谢：]