Question

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

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

我尝试为此解决方案实现表格，但我发现它不能使用我的代码，所以我尝试了这个JS代码......

代码可能达到我想要的效果，但左侧div的背景不显示，所以出现了问题...

HTML

<div id="Div2">Hello2</div>
<br>
<div id="Div1">Hello1</div>

CSS

#Div1{
    background-color:blue;
}

#Div2{
    background-color:red;
}

JS

$(document).ready(function(){    
    document.onchange=setDivHeight();

function setDivHeight(){
    var x=Number(document.getElementById('Div1').style.height)
    document.getElementById('Div2').style.height=x;
}

});



setInterval(function() {
   $('#Div1').eq(0).append('<p>appended content</p>')
}, 1000)

http://jsfiddle.net/r6sc27ck/

Answer 1

如果您在彼此旁边有2个div，则可以通过设置vertical-allign来对齐它们：

div{
    vertical-align: top;
}

JSFiddle

Answer 2

您可以将两个div设置为display:table-cell，将包含div设置为display:table。这是更新的小提琴http://jsfiddle.net/r6sc27ck/1/

还有很多方法可以实现这一目标，请看这里。 https://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

尝试

CSS

#Div1 {
    display:inline-block;
    position:relative;
    background-color:blue;
    width:35%;
}
#Div2 {
    display:inline-block;
    position:relative;
    background-color:red;
    width:35%;
}

JS

$(document).ready(function () {
    setInterval(function () {
        $("#Div1").eq(0).append("<p>appended content</p>");
        $("#Div2").eq(0).append("<p>&nbsp;</p>");
    }, 1000)
});

jsfiddle http://jsfiddle.net/vnt83hz7/4/

Answer 4

您应该在向div添加内容的过程结束时调用setDivHeight（），而不是使用document.onchange。我还修改了setDivHeight（）的样式和内容。

http://jsfiddle.net/r6sc27ck/4/

var prevHeight;
$(document).ready(function(){    
      prevHeight = $('#Div1').height();
});
function setDivHeight(){
    var curHeight = $('#Div1').height();            
    if (prevHeight !== curHeight) {
        prevHeight = curHeight;
        setDivHeight();
    }            
    $('#Div2').height($('#Div1').height());  

}


setInterval(function() {
   $('#Div1').eq(0).append('<p>appended content</p>');
    setDivHeight();
}, 1000)

试图让div总是匹配高度不断增加和减少的div的高度

4 个答案: