问题描述
这看起来应该是重复的 - 我发现了许多类似的问题 - 但没有人回答我的工作。如果我错过了一个，请将它指向我，然后我将删除它。我有一个绝对定位的div，其中包含多个子div。我希望容器扩展到最宽的孩子的宽度，并且所有其他孩子都要扩展到相同的宽度。容器应该有最小宽度和最大高度;如果孩子太多，它应该滚动。
所以这与组合下拉的行为类似，虽然这用在不同的上下文中。 / p>
我提出的解决方案适用于Chrome，Firefox和IE8，但不适用于IE7（标准模式），儿童不会扩展到容器的宽度。我尝试过一些改变，其中一些改变了孩子的状态，但都导致了额外的问题。什么是正确的做法？
我已经创建了以下示例来说明问题：
< HTML>
< head>
< style>
.container {
display：block;
位置：绝对;
top：50px;
left：50px;
min-width：100px;
最大高度：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;
背景：#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>
在IE7中，父div需要为宽度：100％或宽度：auto 定义宽度以在儿童元素上正常工作。不幸的是，在父母上定义宽度会产生相反的效果，因为您希望父母大小与最大的孩子相关，而不是静态的。这个浏览器的怪癖对你来说可能是无害的，你可以忽略它，但如果你希望你的网站在IE7中仍然看起来不错，你总是可以选择使用JavaScript来设置父宽度等于最大的子元素。
以下是我使用的JavaScript：
$（function ）{
/ *函数查找.container
。的.entry子项的最大宽度，并将该宽度指定给父容器.container。
这是用于需要定义父宽度的IE7错误订单
width：自动处理子元素
* /
var elemWidth = 0;
var maxWidth = 0;
$（'。container'）
.find（'。entry'）
.each（function（）{
//遍历.entry和a将最大宽度设为var elemWidth
if（$（this）.width（）> elemWidth）{
elemWidth = $（this）.width（）;
}
}）;
maxWidth = elemWidth + 30; //额外的30px间距来补偿y溢出
$（'。container'）。width（maxWidth）;
}）;
下面是一个可用的jsfiddle示例：
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>
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/
这篇关于如何让一个容器的子div匹配IE7中最大的孩子的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！