html - 根据第二个浮动 div 内容调整浮动第一个 div 的大小？

Question

我想必须并排浮动列。如果第二列有内容，那么第一列应该根据第二列调整其内容的大小，这可以用 CSS 吗？未定义宽度。

Answer 1

可以使用 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 的宽度

所有示例都可以在这个 jsFiddle中找到