Question

这似乎是一种重复——我已发现许多类似问题,但没有一个答案来回答行之有效的地雷。如果我错过,请向我指出,我删除。

我有一个包含几个小孩的绝对沉积地。我希望该集装箱能够扩大到最广儿童的宽度,而且所有其他儿童也能够扩大到同样的宽度。集装箱应有最低的宽度和最高高度;如果孩子太多,它就应当滚动。

因此,这类似于bo子的下游行为,尽管这在不同的背景下使用。

我的解决方案是关于 Chrome、IE-8的工程,而不是IE7(标准住所)的工程,在这些工程中,孩子们没有扩大到集装箱码头。我曾尝试过一些变化,其中一些变化使子女扩大,但都造成了更多的问题。这样做的正确方式是什么?

我举出以下例子来说明问题:

<html>
<head>
<style>

.container {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 100px;
    max-height: 100px;
    border: 1px solid #999;
    overflow-x: hidden;
    overflow-y: auto;
}

.entry {
    display: block;
    width: auto;
    height: 20px;
    padding: 3px 20px 3px 5px;
    white-space: nowrap;
    background: #eee;
}

</style>
</head>
<body>
    <div class= container >
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQ</div>
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class= entry ><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
    </div>
</body>

Answer 1

在IE7中,母体需要一个界定的宽度,即:<100%/代码>或<代码>width:auto,以适当处理有关儿童的内容。不幸的是,对于你来说,在母子上确定宽度会适得其反,因为你希望母体在最大子女而不是静态的情况下保持活力。

现在,这一浏览器qui子对你来说是无足轻重的,只能无视它并离开它,但如果你想要你的网站仍然看好E7,那么你总是可以选择使用 Java文,将母体的宽度定为与最大的儿童部分。

这里使用的是 Java一号文字:

$(function() {
    /* function finds largest width of the .entry child of .container
    and assigns that width to the parent .container.
    This is for IE7 bug that requires a defined parent width in order for 
    width:auto to work on the children elements
    */
    var elemWidth = 0;
    var maxWidth = 0;
    $( .container )
        .find( .entry )
        .each(function() {
            // iterate through .entry and assign largest width to var elemWidth
            if ( $(this).width() > elemWidth ) {
            elemWidth = $(this).width();
            }
         });
    maxWidth = elemWidth + 30; // extra 30px spacing to compensate for y-overflow
    $( .container ).width(maxWidth);
});

这里是一例工作 j:。

Answer 2

~~This should work...~~

$(function() {
    var maxWidth = 0;
    $( .container )
        .find( div )
        .each(function() { maxWidth = Math.max($(this).width(), maxWidth) })
        .each(function() { $(this).width(maxWidth) })
        .width(maxWidth);
});

EDIT: 似乎根本上没有在E7工作。难道有人会有一个固定点?

友情链接