使div根据每个内容的大小从下到上递增

，可以通过以下步骤实现：

首先，需要确定每个内容的大小。可以使用CSS的属性，如height、width等来设置每个内容的大小。
接下来，需要确定每个内容的顺序。可以使用CSS的属性，如order来设置每个内容的顺序。初始时，可以将每个内容的order属性设置为默认值0。
然后，通过JavaScript来获取每个内容的大小，并根据大小来更新每个内容的order属性。可以使用JavaScript的方法，如getBoundingClientRect()来获取每个内容的大小。
根据获取的大小信息，可以编写一个排序算法，将每个内容按照大小从下到上递增排序。
最后，将排序后的顺序应用到每个内容的order属性上，以实现div根据每个内容的大小从下到上递增的效果。

以下是一个示例代码：

HTML:

<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>

CSS:

.content {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
  order: 0;
}

JavaScript:

// 获取每个内容的大小
var content1 = document.getElementById("content1").getBoundingClientRect().height;
var content2 = document.getElementById("content2").getBoundingClientRect().height;
var content3 = document.getElementById("content3").getBoundingClientRect().height;

// 创建一个对象数组，包含内容的大小和对应的ID
var contents = [
  { id: "content1", size: content1 },
  { id: "content2", size: content2 },
  { id: "content3", size: content3 }
];

// 根据内容大小从下到上递增排序
contents.sort(function(a, b) {
  return b.size - a.size;
});

// 更新每个内容的顺序
for (var i = 0; i < contents.length; i++) {
  document.getElementById(contents[i].id).style.order = i;
}

通过以上代码，div的内容将根据每个内容的大小从下到上递增排列。你可以根据实际情况修改CSS样式和JavaScript代码来适应你的需求。