如何在同一行中为不同的div赋予不同的高度

在同一行中为不同的div赋予不同的高度，可以通过以下几种方式实现：

使用CSS的flexbox布局：flexbox是一种强大的布局模型，可以轻松实现灵活的布局。通过设置每个div的flex属性，可以根据需要分配不同的高度。例如：

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
  <div class="div3">Content 3</div>
</div>

<style>
.container {
  display: flex;
}

.div1 {
  flex: 1;
  background-color: red;
}

.div2 {
  flex: 2;
  background-color: green;
}

.div3 {
  flex: 3;
  background-color: blue;
}
</style>

在上述示例中，div1的高度将是div2的一半，div3的高度将是div2的1.5倍。

使用CSS的grid布局：grid布局是另一种强大的布局模型，可以实现复杂的网格布局。通过设置每个div所在的网格行的高度，可以为不同的div赋予不同的高度。例如：

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
  <div class="div3">Content 3</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 3fr;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: green;
}

.div3 {
  background-color: blue;
}
</style>

在上述示例中，div1的高度将是div2的一半，div3的高度将是div2的1.5倍。

使用JavaScript动态计算高度：如果需要根据具体内容或其他条件动态计算div的高度，可以使用JavaScript来实现。通过获取每个div的内容或其他相关信息，然后计算出相应的高度，并将其应用到对应的div上。例如：

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
  <div class="div3">Content 3</div>
</div>

<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
var div3 = document.querySelector('.div3');

var div1Height = /* 根据具体内容或其他条件计算高度 */;
var div2Height = /* 根据具体内容或其他条件计算高度 */;
var div3Height = /* 根据具体内容或其他条件计算高度 */;

div1.style.height = div1Height + 'px';
div2.style.height = div2Height + 'px';
div3.style.height = div3Height + 'px';
</script>

通过以上三种方式，可以为不同的div赋予不同的高度，实现灵活的布局效果。