我有两个div元素并排。我希望它们的高度是相同的,并保持不变,如果其中一个调整大小。如果其中一个增长是因为放入了文本,那么另一个也应该增长以匹配高度。不过我还是搞不懂这个。什么好主意吗?

<div style="overflow: hidden"> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> Some content!<br /> </div> <div style=" border: 1px solid #cccccc; float: left; padding-bottom: 1000px; margin-bottom: -1000px; "> Some content! </div> </div>


当前回答

我几乎已经尝试了上面提到的所有方法,但是flexbox解决方案不能正确地与Safari一起工作,网格布局方法也不能正确地与旧版本的IE一起工作。

这个解决方案适合所有屏幕,并且是跨浏览器兼容的:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

上面的方法将等于单元格的高度,对于较小的屏幕,如手机或平板电脑,我们可以使用上面提到的@media方法。

其他回答

我只是想添加到Pavlo描述的伟大的Flexbox解决方案,在我的情况下,我有两个列表/列的数据,我想并排显示之间只有一点间距,水平居中封闭的div.通过在第一个(最左边)flex:1 div内嵌套另一个div,并将其浮动在右边,我得到了我想要的。我找不到任何其他方法来做到这一点,并在所有视口宽度上取得一致的成功:

<div style="display: flex;">
    <div style="flex: 1; padding-right: 15px;">
        <div style="float: right">
            <!-- My Left-hand side list of stuff -->
        </div>
    </div>

    <div style="flex: 1; padding-left: 15px;">
        <!-- My Right-hand side list of stuff -->
    </div>
</div>

我有同样的问题,所以我创建了这个小函数使用jquery jquery是每个web应用程序的一部分。

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

您可以在页面就绪事件时调用此函数

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

我希望这对你有用。

这是一个很多人都遇到过的常见问题,但幸运的是,一些聪明的人,如埃德·艾略特在他的博客上,已经在网上发布了他们的解决方案。

基本上你要做的就是通过添加padding-bottom: 100%使两个div /column都非常高,然后使用margin-bottom: -100%“欺骗浏览器”认为它们没有那么高。埃德·艾略特在他的博客上有更好的解释,其中也有很多例子。

.container { 溢出:隐藏; } .column { 浮:左; 保证金:20 px; 背景颜色:灰色; padding-bottom: 100%; margin-bottom: -100%; } < div class = "容器" > < div class = "列" > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > 一些内容!< br > < / div > < div class = "列" > 某物 < / div > < / div >

如果你不介意其中一个divs是一个主人,并口述两个divs的高度,有这个:

小提琴

无论如何,右边的div会扩展或压缩&溢出来匹配左边的div的高度。

两个div都必须是容器的直接子节点,并且必须在容器中指定它们的宽度。

相关的CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

我在这里所做的是将高度更改为min-height,并给它一个固定的值。如果其中一个被调整大小,另一个将保持相同的高度。不知道这是不是你想要的