Question

为了实现可变数，宽度和高度的各种div的匹配高度，我使用的jQuery脚本要求这些div是浮动的。但是，我希望它们居中，所以我使用相对位置技巧来使它们居中。

CSS

div#cardwrap {
border:3px purple solid;
float:left;
position: relative;
left:50%;
}

div#centermaster {
text-align:center;
border:1px yellow solid;
float:left;
position: relative;
left:-50%;
}

div.cardtable {
float:left;
padding:35px;
border:1px green solid;
}

HTML

<div id=cardwrap>
    <div id=centermaster>
        <div class=cardtable>Images</div> (variable number)
        ...
    </div>
</div>

这将完美地工作，除了我似乎无法正确收缩包裹包装。在图像加载之前，它看起来很好initially - 黄色包装器以绿色div为中心。但是当图像加载时，绿色div包裹到下一行，我做想要的。但是，右边会出现一个gap，这样黄色的div就不再是收缩包裹，因此不会使它们居中。如何保持与宽度相匹配的黄色div，然而许多绿色div可以放在一行上？

另一种在居中时均衡div高度的方法也是受欢迎的。

（在给定变量内容的情况下，是否有脚本来均衡某些div类的宽度？）基本上，最终目标是绿色div为中心格式，同时适应可变屏幕尺寸和内容。

Answer 1

不确定您到底想要什么，但我认为您需要内嵌块，例如：http://jsfiddle.net/TSpXZ/

要使它们在IE中运行，请在条件注释中添加以下内容：

div.cardtable {
    display:inline;
    zoom:1;
}

尝试使用内联块进行更多实验 - 它们非常棒！

在另一个div内收缩可变数量，宽度和高度的浮动div

1 个答案: