父div中两个子div，右边div中一个img，高度自适应，如何让左边子div高度与右边保持一致

最新推荐文章于 2022-07-14 16:03:07 发布

little_kid_pea

最新推荐文章于 2022-07-14 16:03:07 发布

阅读量1.9k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/little_kid_pea/article/details/84439539

版权

方法1

可以用js获取右边div高度，然后设置左边div高度

可是用css如何实现，因为用js有视觉延迟

方法2

可以用display：table实现

但是有个问题。这样每个div中都是上下居中的，没办法不居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <title>等高布局</title>
  <style>
    html {
      font-size: 10px;;
    }
    body {
      font-size: 1.4rem;
    }
    .box {
      background-color: rgba(200,200,200,0.7);
      margin: 0 1rem;
      width: 33.33%;
      padding: 1rem;
    }
    .box:nth-child(2) {
      height: 5rem;
      background-color: rgba(200,210,230,0.7);
    }
    .accordant {
      display: table-row;
    }
    .table {
      width: 100%;
      display: table;
    }
    .table .accordant {
      display: table-row;
    }
    .table .accordant .box {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="table">
  <div class="accordant">
    <div class="box">
      <img src="http://placehold.it/200x200.png" alt="200x200"/>
      <p>这是一个 Figure</p>
    </div>
    <div class="box">
      <img src="http://placehold.it/250x250.png" alt="200x200"/>
      <p>这是一个 Figure</p>
    </div>
    <div class="box">
      <img src="http://placehold.it/300x300.png" alt="200x200"/>
      <p>这是一个 Figure</p>
    </div>
  </div>
</div>
</body>
</html>

方法3

设置左边div的css样式为bottom:0px;

little_kid_pea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
父div中两个子div，右边div中一个img，高度自适应，如何让左边子div高度与右边保持一致

方法1可以用js获取右边div高度，然后设置左边div高度可是用css如何实现，因为用js有视觉延迟方法2可以用display：table实现但是有个问题。这样每个div中都是上下居中的，没办法不居中&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="utf-8"...
复制链接

扫一扫