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

Question

我想并排 float 列。如果第二列有内容，那么第一列应该根据第二列调整其内容的大小，这可以用 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 的文本或子元素，如果满足其中一个条件，则更改第一个的宽度

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