左右两个div，左边的div高度取决于右边的div，且左边的div比右边的div高

可以通过使用CSS中的flexbox布局来实现这个需求。

首先，将左右两个div包裹在一个父级元素中，并且设置父级元素为flex布局：

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

.container {
  display: flex;
}

接着，我们可以给左边的div设置flex-grow属性，让它自动填充剩余的空间，从而实现高度比右边的div高的效果：

.left {
  flex-grow: 1;
}

最后，我们可以使用JavaScript来动态计算右边div的高度，并将其应用到左边的div上：

const rightDiv = document.querySelector('.right');
const leftDiv = document.querySelector('.left');

leftDiv.style.height = `${rightDiv.offsetHeight}px`;

这样，左边的div就会根据右边的div的高度而自动调整高度，并且比右边的div高。

相关问题

css如何让两个div并列且图在左边 文字在右边 并排

可以使用浮动或者Flex布局来实现两个div并列，左边是图片，右边是文字，并排排列的效果。下面给出两种实现方法：

方法一：使用浮动

通过给左侧的图片设置浮动属性，使其脱离文档流并向左浮动，然后给右侧的文字容器设置一个左边距，使其距离图片有一定的间距。具体的代码如下：

<div class="container">
  <div class="left">
    <img src="图片路径" alt="图片描述">
  </div>
  <div class="right">
    <p>文本内容</p>
  </div>
</div>

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  margin-left: 10px; /* 可以根据具体情况设置间距 */
}

方法二：使用Flex布局

使用Flex布局可以更方便地实现两个div并列，左侧是图片，右侧是文字，并排排列的效果。具体的代码如下：

<div class="container">
  <div class="left">
    <img src="图片路径" alt="图片描述">
  </div>
  <div class="right">
    <p>文本内容</p>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
}

.left {
  flex-shrink: 0; /* 防止图片被压缩 */
}

.right {
  margin-left: 10px; /* 可以根据具体情况设置间距 */
}

以上两种方法都可以实现两个div并列，左侧是图片，右侧是文字，并排排列的效果，可以根据具体需要选择适合的方法。

html 两个div 左边的宽度不变右边的随窗口大小变化

要实现左边的div宽度不变，右边的div宽度随窗口大小变化，可以使用CSS中的flex布局。具体来说，可以将这两个div的父元素设置为flex容器，然后将左边的div设置为一个固定宽度，右边的div设置为一个flexible宽度，即可以自动调整大小的宽度。

下面是一个示例代码：

<style>
  .container {
    display: flex;
  }
  .left {
    width: 200px;
    background-color: red;
  }
  .right {
    flex: 1;
    background-color: blue;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

在上面的代码中，左边的div使用了200px的固定宽度，右边的div使用了flex: 1的属性，表示它的宽度可以根据容器剩余的空间自动调整大小。这样，当浏览器窗口大小变化时，右边的div的宽度就会自动调整，而左边的div的宽度不变。