我有一个不断改变身高的div。 我怎样才能得到第二个div来不断采用第一个div的高度?

我有一个包含项目列表的div。 用户可以添加/删除列表中的项目,因此div不断更改高度以补偿列表大小的变化。

我右边有另一个div,它应该提供左边项目的详细信息。 我怎样才能让右侧的div不断与左侧div保持垂直对齐并改变高度,使其等于左侧div当前的高度,因为项目是从左侧div列表中添加和删除的?

display:table-cell会帮助你:

 div { display:table-cell; border:1px solid; } 
 
one
two
three

如果不显示您的代码,很难回答您的问题。 试着把它放在小提琴里? https://jsfiddle.net/

这就是我要说的。 将左右div放入容器div中,然后让左右divinheritance容器高度。

 
list items
list items
list items
right div


从两者中移除高度,并在两者之间包裹div以添加高度。

只要文档上的某些内容发生更改,就会调用此函数,并将div2的高度设置为div1高度的值

  

Flexbox解决方案

这个答案改编自css-tricks的一个例子 – 检查出来

假设以下标记:

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

我们可以创建一个flexbox,它将强制所有列符合最大的高度,具有以下样式:

 .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; font-weight: bold; text-align: center; } .wrapper > * { padding: 10px; flex: 1 100%; } .main { text-align: left; background: deepskyblue; order: 2; flex: 3 0px; } .aside { background: gold; max-width: 200px; order: 1; } body { padding: 2em; } 

这是一个小提琴

注意:此解决方案的浏览器支持仅限于IE10 +,浏览器前缀的使用仍适用于大多数主流浏览器版本。 有关flexbox如何工作的更全面细分,我强烈建议您查看我上面链接的文章。