问题描述
我正在使用 flexbox 搭建一个网站的基本 UI.与通常的电子邮件布局非常相似.
出于某种原因,列式 flexbox 容器 (.content-main
, plum 颜色) 的高度比它的父级大,这是我不想要的.
我制作了一个 codepen 片段来展示这种行为.
html,身体 {宽度:100%;高度:100%;背景:浅蓝色;box-sizing: 边框框;}* {box-sizing: 边框框;}.容器 {高度:继承;背景:PeachPuff;填充:1em;显示:弹性;最大高度:500px;}.侧边栏{弹性:0 1 15%;背景:卡其色;}.内容 {弹性:1 1 自动;背景:梅花;填充:0.8em;显示:弹性;弹性方向:列;}.content-header {背景:浅绿色;填充:0.3em;弹性:0 0 7%;}.content-main {显示:弹性;背景:深海绿;填充:1em;高度:100%;弹性:1 1 自动;}.main-list {弹性:0 0 12%;背景:浅珊瑚色;}.主体 {弹性:0 1 自动;填充:1em;背景:浅青色;显示:弹性;flex-flow:行包装;溢出-y:滚动;}
<div class='sidebar'><ul><li>Onnnne</li><li>Twoo</li><li>三</li><div class='content'>
<span>这是内容标题</span><ul><li>列表1</li><li>列表2</li><li>列表3</li><div class='main-body'>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>如何防止绿色孩子的身高超过其梅花父母?我希望孩子只是可滚动但永远不会比其父母高.
解决方案 Flexbox 引入 auto
作为 min-height
的新初始值.它使 flex 项目与它们的内容一样高.
您可以通过将 min-height
设置为 0
(旧的初始值)来撤消该操作:
.content-main {最小高度:0;}
html,身体 {宽度:100%;高度:100%;背景:浅蓝色;box-sizing: 边框框;}* {box-sizing: 边框框;}.容器 {高度:继承;背景:PeachPuff;填充:1em;显示:弹性;最大高度:500px;}.侧边栏{弹性:0 1 15%;背景:卡其色;}.内容 {弹性:1 1 自动;背景:梅花;填充:0.8em;显示:弹性;弹性方向:列;}.content-header {背景:浅绿色;填充:0.3em;弹性:0 0 7%;}.content-main {显示:弹性;背景:深海绿;填充:1em;高度:100%;弹性:1 1 自动;最小高度:0;}.main-list {弹性:0 0 12%;背景:浅珊瑚色;}.主体 {弹性:0 1 自动;填充:1em;背景:浅青色;显示:弹性;flex-flow:行包装;溢出-y:滚动;}
<div class='sidebar'><ul><li>Onnnne</li><li>Twoo</li><li>三</li><div class='content'>
<span>这是内容标题</span><ul><li>列表1</li><li>列表2</li><li>列表3</li><div class='main-body'>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody><表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>I'm scaffolding a basic UI for a site using flexbox. Quite similar to the usual email layout.
For some reason the second children( class .main-body
, lightseagreen color) of a column-layouted flexbox container(.content-main
, plum color) has a bigger height than its parent, which I do not want it to.
I made a codepen snippet to show this behaviour.
html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}
<div class='container'>
<div class='sidebar'>
<ul>
<li>Onnnne</li>
<li>Twoo</li>
<li>Threee</li>
</ul>
</div>
<div class='content'>
<div class='content-header'>
<span>This iscontent header</span>
</div>
<div class='content-main'>
<div class='main-list'>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div class='main-body'>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
How can I prevent the green child to have bigger height than its plum parent? I want the child to just be scrollable but never taller than its parents.
解决方案 Flexbox introduces auto
as the new initial value of min-height
. It makes flex items grow as tall as their contents.
You can undo that by setting min-height
to 0
, the old initial value:
.content-main {
min-height: 0;
}
html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
min-height: 0;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}
<div class='container'>
<div class='sidebar'>
<ul>
<li>Onnnne</li>
<li>Twoo</li>
<li>Threee</li>
</ul>
</div>
<div class='content'>
<div class='content-header'>
<span>This iscontent header</span>
</div>
<div class='content-main'>
<div class='main-list'>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div class='main-body'>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
这篇关于弹性盒.避免孩子身高比父母长(列方向)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-01 10:44