左边&中间盒子高度随右边高度变化

吃炸鸡的前端

已于 2022-08-09 15:11:40 修改

阅读量405

点赞数 1

分类专栏： css 项目问题文章标签： css html html5

于 2021-09-28 22:51:05 首次发布

本文链接：https://blog.csdn.net/weixin_43239880/article/details/120539222

版权

项目问题同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

项目中有个需求，大概就是父盒子非固定高度，左边子盒子的高度，以及中间那个线条的高度都是不定的，随右边子盒子的高度变化而变化，具体的效果如图。

在这里插入图片描述

代码demo已经放到github了，需要可以直接下载就行了

链接:https://github.com/rui-rui-an/leftautoheight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 100%;
      display: flex;
      /* 写的时候千万不要有下面这句代码 */
      /* align-items: center; */
      margin-top: 3px;
    }
    .left{
      width: 200px;
      /* 也别写这句，左边盒子不随父盒子高度，通常我们会写100%，这里其实应该是auto,但是不写也可以,因为默认值就是auto,auto意思是该标签的高度将由它的子标签的高来 */
      /* height: 100%; */
      height: auto;
      background-color: yellow;
    }
    .son1{
      width: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .son12{
      width: 15px;
      height: 15px;
      background-color: rgb(94, 51, 58);
      border-radius: 50%;
    }
    .son13{
      width: 1px;
      /* 这里就要写上height:100%，不写没有效果,具体是为什么，我觉得应该是son13的高度要跟着son1来走吧 */
      height: 100%;
      background-color: #0094ff;
    }
    .son2{
      background-color: pink;
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="left">2021-09-28</div>
    <div class="son1">
      <div class="son12"></div>
      <div class="son13"></div>
    </div>
    <div class="son2">
      <div><span>事件描述：</span><span>这里发生什么事</span></div>
      <div><span>事件调查结果：</span><span>学前端，没结果</span></div>
    </div>
    
  </div>
  <div class="father">
    <div class="left">2021-11-11</div>
    <div class="son1">
      <div class="son12"></div>
      <div class="son13"></div>
    </div>
    <div class="son2">
      <div><span>事件类型</span><span>这里发生第二件的什么事</span></div>
      <div><span>事件发情情况:</span><span>546546</span></div>
      <div><span>事件AAS:</span><span>456546</span></div>
      <div><span>事件撒旦王:</span><span>54654</span></div>
      <div><span>事件搜索:</span><span>这里发生654654第二件的什么事</span></div>
      <div><span>事件首选项:</span><span>645645</span></div>
      <div><span>事件搜索:</span><span>45656</span></div>
    </div>
  </div>
</body>
</html>

吃炸鸡的前端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左边&中间盒子高度随右边高度变化

项目中有个需求，大概就是父盒子非固定高度，左边子盒子高度随右边子盒子的高度变化而变化，具体的效果如图。代码demo已经放到github了，需要可以直接下载就行了链接:https://github.com/rui-rui-an/leftautoheight<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
复制链接

扫一扫