CSS - 如何使得多个div容器高度保持动态一致 - 学习/实践

灰太狼 2022-12-22 09:22 161阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于实现页面布局, 特别是列表块UI布局.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 实现需求: 使得多个div容器高度保持动态一致, 即并不给父级以及子级div容器指定高度, 而且由子级动态内容自行撑起父级高度. &nbsp; Code: 
 <blockquote> 
 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp; &nbsp;&lt;title&gt;多个div高度保持一致&lt;/title&gt; &nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#parent { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: #fff; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 1140px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 0px auto; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid rgb(0, 184, 148); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*background: rgb(0, 184, 148);*/ 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 高度是未知的, 也就是由[高度最大的]子元素决定该元素高度, 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 注意, 如果某个子元素高度是人为定义写死的, 自然不会有变化 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: flex; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;flex-wrap: wrap; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;justify-content: center; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.child { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/*border: 1px solid red;*/ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: flex; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.child:nth-child(1) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid rgb(253, 203, 110); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background: rgb(253, 203, 110); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.child:nth-child(2) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid rgb(162, 155, 254); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background: rgb(162, 155, 254); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 200px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.child:nth-child(3) { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid rgb(45, 52, 54); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background: rgb(45, 52, 54); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 300px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.grandchild { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid rgb(9, 132, 227); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;flex: 1; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} 
 &nbsp;&nbsp; &nbsp;&lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp; &nbsp;&lt;div id="parent"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="child"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="grandchild"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!-- 这里内容都是动态的, 并没有认为将高度定死 --&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;1111111111&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="child"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="grandchild"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;22222222&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="child"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="grandchild"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;33333333&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 
 </blockquote> &nbsp; 效果: <img alt="" height="357" src="https://img-blog.csdnimg.cn/20201119110448850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; key points: flex布局 &nbsp; &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

后续补充

...