Question

是否可以有一张桌子：

由两个并排的等宽单元组成
在单元格内容周围有边框和边距
两个边界都扩展到与最高内容的高度匹配？

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

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

Answer 1

根据此页面回答有关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>

Answer 2

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

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

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

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

2 个答案: