基于第二浮动div内容调整浮动第一div的大小？

我想不得不并列浮动列。如果第二列包含内容，那么第一列应该根据第二列重新调整其内容的大小，这对于CSS来说是否可行？宽度未定义。基于第二浮动div内容调整浮动第一div的大小？

2013-07-28 dkjain

使用CSS这里http://css-tricks.com/fluid-width-equal-height-columns/讨论的几种方法中使用;可以看出，没有简单直接的解决方案只使用CSS。我发现下面的jQuery插件很有用http://tsvensen.github.io/equalize.js/ – Elise

你最终解决了你的问题吗？ –

这是可能的使用JavaScript，但不是直CSS。这里有一些方法来做到这一点：

使用Javascript：

var rightDiv = document.getElementById("straightJ2"); 
var rightWidth = rightDiv.clientWidth; 
var leftDiv = document.getElementById("straightJ1"); 
if($('#straightJ2').text() || rightDiv.hasChildNodes()) { 
    leftDiv.style.width = rightWidth + "px"; 
}

或者更最小的（也可能是压倒性/难追）的javascript：

if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}

使用jQuery：

if($('#secondColumnId').html() != '') 
{ 
    $('#firstColumnId').width($('#secondColumnId').width()); 
}

其中的每一个检查文本或子元素的第二个div，并更改第一个div的宽度的那些条件e为满足

可以发现所有的例子在this jsFiddle

来源

2013-07-28 21:39:16

如果你想设置元素的高度相等，你可以简单地将'height'换成'width' –

基于第二浮动div内容调整浮动第一div的大小？

回答

相关问题