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

1.应用场景

主要用于实现页面布局, 特别是列表块UI布局.

2.学习/操作

实现需求:

使得多个div容器高度保持动态一致, 即并不给父级以及子级div容器指定高度, 而且由子级动态内容自行撑起父级高度.

Code:

<!DOCTYPE html>
<html>
<head>
   <title>多个div高度保持一致</title>
   <style type="text/css">
       #parent {
           color: #fff;
           width: 1140px;
           margin: 0px auto;
           border: 1px solid rgb(0, 184, 148);
           /*background: rgb(0, 184, 148);*/

           /*高度是未知的, 也就是由[高度最大的]子元素决定该元素高度, 注意, 如果某个子元素高度是人为定义写死的, 自然不会有变化*/

           display: flex;
           flex-wrap: wrap;
           justify-content: center;
       }

       .child {
           /*border: 1px solid red;*/
           display: flex;
flex-direction: column;
flex-wrap: wrap;
       }

       .child:nth-child(1) {
           border: 1px solid rgb(253, 203, 110);
           background: rgb(253, 203, 110);
           width: 100px;
       }

       .child:nth-child(2) {
           border: 1px solid rgb(162, 155, 254);
           background: rgb(162, 155, 254);
           width: 200px;
       }

       .child:nth-child(3) {
           border: 1px solid rgb(45, 52, 54);
           background: rgb(45, 52, 54);
           width: 300px;
       }

       .grandchild {
           border: 1px solid rgb(9, 132, 227);
           flex: 1;
       }

   </style>
</head>
<body>
   <div id="parent">
       <div class="child">
           <div class="grandchild">
               
               <p>1111111111</p>
               <p>1111111111</p>
               <p>1111111111</p>
               <p>1111111111</p>
               <p>1111111111</p>
               <p>1111111111</p>
           </div>
       </div>
       <div class="child">
           <div class="grandchild">
               <p>22222222</p>
           </div>
       </div>
       <div class="child">
           <div class="grandchild">
               <p>33333333</p>
           </div>
       </div>
   </div>
</body>
</html>

效果:

key points: flex布局

后续补充

...

3.问题/补充

TBD

4.参考

TBD

后续补充

...

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

猜你喜欢