将单元格中的边框扩展到内容最高的单元格
Posted
技术标签:
【中文标题】将单元格中的边框扩展到内容最高的单元格【英文标题】：Expand borders in cells to the cell with tallest content 【发布时间】：2018-11-07 00:33:03 【问题描述】：是否可以有一张桌子：
由两个并排的等宽单元组成 单元格内容周围有边框和边距 两个边框都扩展以匹配其中最高内容的高度？标准 html 表格、Bootstrap 3 或 Flexbox 都是选项 - 我正在使用 Firefox、Chrome 和 IE 11 对其进行测试。
使用 Bootstrap 的 row 和 col 类，我尝试在每个单元格内添加一个 div 来设置内容的样式，并且可以在内容周围留出边距，但单元格与文本的高度不匹配。或者我可以通过删除 div 来让单元格适合文本，但删除 div 意味着失去边距。或者我可以设置一个固定的高度，然后可以调整窗口大小以使文本下降到该高度以下。
【问题讨论】：
似乎是 flexbox 的完美候选者，不需要像 bootstrap 这样的大库 我刚刚找到了这个 Flexbox 示例：jsfiddle.net/poztin/MFHj7/1。您可以修改 'left' 和 'right' 使其具有 20px 的边距，但它们仍然会填充 100% 的可用高度，而不仅仅是满足文本。仍在试验中。 您能分享一张您正在尝试完成的工作和/或您迄今为止尝试过的代码的图片吗？ 我会发布答案，2 分钟。 【参考方案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>
【讨论】：
【参考方案2】：根据您的描述，我认为这就是您想要的：https://codepen.io/timothyjellison/pen/wXwqpo
关键是将容器div设置为display: flexbox，然后将内容div设置为flex: 1。
请参阅此问题以获取更多详细信息：Flexbox not giving equal width to elements
【讨论】：
我发布了自己的答案，但接受了这个答案，因为它使用更少的代码行来实现相同的目标。在 IE FF 和 Chrome 上测试并运行。以上是关于将单元格中的边框扩展到内容最高的单元格的主要内容，如果未能解决你的问题，请参考以下文章
UIImageView 适合自调整大小的 tableview 单元格中的最大宽度
在不更改边框颜色的情况下更改 GridView 单元格中的文本颜色