将单元格中的边框扩展到具有最高内容的单元格

Question

是否可以有一张桌子：

由两个并排的等宽单元组成
带有边框和边缘的单元格内容
两个边界都在扩展，以匹配任何一个中最高内容的高度？

标准HTML表格，Bootstrap 3或Flexbox都是选项 - 我正在使用Firefox，Chrome和IE 11进行测试。

使用Bootstrap行和col类，我尝试在每个单元格中添加一个div来设置内容的样式，我可以在内容周围获得边距，但单元格与文本的高度不匹配。或者我可以通过取走div来获取单元格以适应文本，但删除div则意味着丢失边距。或者我可以设置固定高度，但是可以调整窗口大小以使文本低于该高度。

Answer 1

根据你的描述，我认为这就是你想要的：https://codepen.io/timothyjellison/pen/wXwqpo

关键是将容器div设置为display: flexbox，然后将内容div设置为flex: 1。

请参阅此问题以进一步阐述：Flexbox not giving equal width to elements

Answer 2

基于此页面关于Flexbox的答案。适用于Chrome，Firefox和IE 11。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您在该页面上一直向下滚动到“Prefixing Flexbox”部分之前的位，则会出现如下图像：

为了达到我们的目的，所需要的只是：

删除所有框，但中间的两个框
添加保证金
使用display：flex可确保在调整页面大小时它们不会低于对方。
使它们的宽度相同

最终结果：

以下是用于实现此目的的修改代码（.htm页面）：

<html>
  <head>
    <style>
      .wrapper {
        display: flex;  
        flex-flow: row;
        font-weight: bold;
        text-align: center;
      }

      .wrapper > * {
        padding: 10px;
        flex: 1 100%;
      }

      .d1 {
        text-align: left;
        background: deepskyblue;
        margin: 20px;
      }

      .d2 {
        text-align: left;
        background: gold;
        margin: 20px;
      }

      @media all and (min-width: 600px) {
        .aside { flex: 1 auto; }
      }

      @media all and (min-width: 800px) {
        .d1    { order: 1; }
        .d2 { order: 2; } 
      }

      body {
        padding: 2em; 
      }
    </style>
  </head>
  <body>
    <div style="border: 1px solid black;">
      <div class="wrapper">
        <article class="d1">
          <p>
          </p>  
        </article>
        <article class="d2">

          <p>
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
          </p>  
        </article>
      </div>
    </div>
  </body>
</html>

将单元格中的边框扩展到具有最高内容的单元格

问题描述投票：0回答：2

2个回答

最新问题

将单元格中的边框扩展到具有最高内容的单元格

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2