css - 如何使两列高度相同

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

转载作者：行者123 更新时间：2023-11-28 09:47:11

25

4

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

enter image description here

有一种解决方法，即在表格宽度高度 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 类就是您所需要的。如果您只是希望表格具有相同的高度，只需将它们的高度设置为相同即可。无论是在线还是以更容易管理的方式，都作为一个应用于它们的类，如下所示。我还将您的内联代码添加为 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>

关于css - 如何使两列高度相同 - Zurb INK，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25205729/

25

4

0

文章推荐： css - Jekyll 液体变量作为内联 CSS 值

文章推荐： jquery - 如果最初隐藏，Google 分享按钮无法正确显示

zurb-foundation - ZURB 基础和行折叠
我在 ZURB 的论坛上发布了一个问题，但我注意到任何帖子都没有答案。因为我认为这个问题可能会发生在许多其他人身上，所以我认为把它放在 SO 上也是一个好主意。它来了: 我使用以下标记制作了一个最小
zurb-foundation - 列之间的 Zurb 基础边距
我有一个非常简单的 Foundation CSS 代码 Content goes here Side goes here 我希望列之间有边距。目前，只有填充。所以如果我添加 bac
zurb-foundation - Zurb 4 个可单独滚动的部分
根据对先前提出的问题的回答，我有一个全屏布局: CSS fullscreen grid layout (with some scrolling sections) 我正在使用的线框: 编辑:这是我希望
zurb-foundation - 可以设置下拉列表的位置(zurb 基础)？
现在下拉菜单的内容默认在右下角。有没有设置它的选项，让它转到左下角？ (基础 5) 最佳答案 “正确”的风格是通过 JS 应用的。要覆盖它，只需提供 #contentDrop #contentDro
zurb-foundation - zurb 基金会 - 更改网格容器大小？
.grid-container的默认宽度是多少？在大屏幕上？我怎样才能改变它并使它变大？正确的做法是什么？最佳答案 .grid-container 的默认宽度在_settings.css 文件中定义
zurb-foundation - zurb 基金会 - 更改网格容器大小？
.grid-container的默认宽度是多少？在大屏幕上？我怎样才能改变它并使它变大？正确的做法是什么？最佳答案 .grid-container 的默认宽度在_settings.css 文件中定义
zurb-foundation - Zurb Foundation 禁用顶部栏折叠
如何禁用中/小屏幕的顶部栏折叠？我按照 Here 中的说明进行操作但无论我将最小宽度设置为什么，我都会得到相同的结果。最佳答案如果您使用的是 SCSS 版本，那么您可以修改断点。 $topbar
zurb-foundation - Zurb 基础 5 - 顶栏搜索
您是否遇到过 zurb 基金会的顶栏问题？输入框不适合导航。我没有修改任何东西，只是粘贴了来自 foundation's page 的代码到他们包含在基础文件中的示例网站。将字体更改为 Open S
zurb-foundation - 如何禁用 Zurb Foundation 中的自定义复选框？
出于多种原因，复选框在最新的 Foundation (4.1.6) 中存在问题。有没有一种简单的方法可以阻止 Foundation 接管它们？我需要 custom我的类 form s 其他原因。我如何
zurb-foundation - Zurb Foundation Switch 控制是如何工作的
我最近开始将 Zurb Foundation 4 用于 Asp MVC 网站，但我不太明白开关控件应该如何工作。文档没有说太多 http://foundation.zurb.com/docs/comp
zurb-foundation - 在 Zurb Foundation 中重新排列列
我的问题是，在桌面上我喜欢先有菜单，然后是最右上角的标志。目前，当我将模板缩小到移动版本时， Logo 位于菜单下方，这并不令人满意。我想在菜单之前吃。我试过使用推/拉没有成功。在移动 View 中
zurb-foundation - Zurb 基础 4 类
是否有任何文档解释foundation.css 中的每个类？我不擅长前端开发，而且似乎没有通过 zurb 网站上提供的粗略文档来掌握概念。提前致谢。最佳答案没有。我认为对他们来说，ZURBling
zurb-foundation - Zurb Foundation 5 切换顶栏不工作
刚刚切换我的 Rails 项目以测试 Zurb Foundation 5，现在切换顶部栏菜单不起作用。当视口(viewport)很小时，顶部栏菜单项消失并且菜单图标像以前一样显示，但是当我单击菜单图
zurb-foundation - 在 zurb foundation 中禁用选项卡
我正在使用 Zurb Foundation 并具有以下 html: Tab 1 Content of section 1. Tab
zurb-foundation - Zurb Foundation 5 显示模式不起作用
我正在尝试使用 zurb Foundation 5 显示模式。但是当我单击按钮时它不起作用并且无法打开。我正在使用这个 html 代码。 index Awesome. I ha
zurb-foundation - 如何找出我正在运行的 Zurb Foundation 版本
有什么我可以在命令行中输入的东西来找出我正在运行的版本吗？最佳答案在不了解您的具体情况的情况下，最简单的方法是在初始化 Foundation ( $(document).foundation();
zurb-foundation - Zurb Foundation 4 打印时如何维护列
我正在使用 Zurb 的 Foundation 4.2.3，但是当我打印页面时，网格布局始终没有得到维护。例如， XXX Lorem
zurb-foundation - Zurb Foundation 6 Reveal 不起作用
我已经下载了新的 Zurb Foundation 6 完整包 ( Foundation for Sites )。存档文件包含以下文件和文件夹: [css] > app.css, foundation.
zurb-foundation - Zurb Foundation 5 offcanvas 不工作
我正在尝试使用 zurb 的基础框架在网站上实现一个 offcanvas，用于移动查看，并且只是从文档中复制了它的代码，但它就是行不通。代码如下: $(document).found
zurb-foundation - Facebook ReactJS 和 Zurb 应用基金会？
我喜欢 Zurb Foundation(SASS，尤其是 Zurb Foundation for Apps)，但想将其与 Facebook ReactJS 和 Flux 一起使用这就是删除 Angu

首页

博学

6Ren·AI

商城

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