时间戳

首页 > 解决方案 > 使左 div 高度紧而不影响父级中的其他 div

html - 使左 div 高度紧而不影响父级中的其他 div

问题描述

不确定如何命名这个，如果造成混淆，请道歉。基本上，我正在创建一个选项卡式模块，其中.rightdiv 始终具有相同的高度。

div 包含链接/选项卡，但我希望这个.leftdiv 的高度不匹配.right。

例如，在下面的方法中，我希望带有文本“内容”的 div 是自动的（匹配文本高度）。

方法：

.parent {
  display: flex;
  flex-direction: column;
}
.flex-row{
  display: flex;
  flex-direction: row;
}

.left,
.right {
  flex-basis: 50%;
}

.left {
  border: 1px solid blue;
}

.right {
  background: red;  
  min-height: 200px;
  width: 200px;
}
<div class="parent">

  <div class="flex-row">
    <div class="left">Content</div>
    <div class="right"></div>
  </div>
  
  <div class="flex-row">
    <div class="left">Content 2</div>
  </div>
  
</div>

所以是这样的：

在此处输入图像描述

我只是<div class="left">Content<br>Content 2</div>为了演示目的而实现了上述目标。

标签： htmlcssbootstrap-4

解决方案

用作容器，并向其中添加两个孩子left。flex然后，将第一个孩子的height属性设置为 100%。像这样：

.parent {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.left,
.right {
  flex-basis: 50%;
}

.left {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}

.row1 {
  height: 100%;
}

.row2 {
  background-color: lightblue;
}

.right {
  background: red;
  min-height: 200px;
  width: 200px;
}
<div class="parent">

  <div class="flex-row">
    <div class="left">
      <div class="row1">
        Content
      </div>
      <div class="row2">
        Content2
      </div>

    </div>
    <div class="right"></div>
  </div>


</div>

推荐阅读