How can one make a container's child divs matc

2019-07-03 14:38发布

站内问答 / HTML/CSS
665 2 5

This seems like it should be a duplicate - I've found many similar questions - but none had an answer to mine that worked. If I have missed one, please point me to it, and I'll delete this one.

I have an absolutely-positioned div containing several child divs. I want the container to expand to the width of the widest child, and all the other children to expand to the same width. The container should have a minimum width and maximum height; if there are too many children, it should scroll.

So this is similar to the behavior of a combo drop-down, though this is used in a different context.

The solution I came up with works on Chrome, Firefox and IE8, but not on IE7 (standards-mode), where the children do not expand to the container's width. I've tried a number of changes, some of which made the children expand, but all resulted in additional problems. What is the correct way to do this?

I've created the following example to illustrate the problem:

<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>

2条回答
Root（大扎）
2楼-- · 2019-07-03 15:14

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: doesn't seem to work in IE7 after all. Maybe someone has a fix?

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
3楼-- · 2019-07-03 15:34

In IE7, the parent div needs a defined width for width:100% or width:auto to work properly on the children elements. Unfortunately for you, defining a width on the parent is counter-productive as you want the parent size to be dynamic in relation to the largest child, not static.

Now, this browser quirk might be innocuous enough for you to just ignore it and leave it be, but if you want your site to still look good in IE7 you always have the option of using JavaScript to set the parent width equal to the largest child element.

Here is the JavaScript I used:

$(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);
});

And here is a working jsfiddle example: http://jsfiddle.net/qG8Qf/1/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)