制作动态大小的盒子答案

【问题标题】：Making dynamic sized boxes制作动态大小的盒子
【发布时间】：2011-04-29 07:55:10
【问题描述】：

我有一个测验，有四个选项可供选择。每个问题都有不同的选项，有时选项的长文本不适合我的固定大小的框（比如div）。我不想有尽可能大的盒子来防止我的盒子溢出。我想根据当前测验中最长的选项来调整盒子的大小，如果每个选项都足够短，请使用我拥有的固定尺寸。

这是我的 HTML 标记：

<div id="options">
    <div class="option 1">
        <span class="optiontText"></span>
    </div>
    <div class="option 2">
        <span class="optiontText"></span>
    </div>
    <div class="option 3">
        <span class="optiontText"></span>
    </div>
    <div class="option 4">
        <span class="optiontText"></span>
    </div>
</div>

这是 CSS：

#options{ width:800px;}
.option{width:380px; margin:10px;}

optionTexts 的文本来自数据库，我想要一个 jQuery 函数，我的框大小取决于文本的大小

【问题讨论】：

标签： javascript jquery

【解决方案1】：

最好使用Jquery Equal Height Plugin 来平衡选项的高度。

【讨论】：

它想让我知道我的最小值或最大值是多少。但最小值和最大值取决于来自服务器的文本。如果确实知道那些我会使用“最小宽度”。它应该从选项中最长的文本中获取框的大小，然后也适用于其他人
如果您保留选项不变，它将自行判断值。而且 min-width 不是跨浏览器。
哦！我没有看到这个例子：'$(".columns").equalHeights().css("color","blue");'谢谢。这就是我一直在寻找的。span>

【解决方案2】：

如果我理解正确，您希望框根据内容调整大小。有几个选项可以做到这一点，但其中之一是在框的 CSS 中设置最小宽度和最大宽度。

.option{
 min-width: 380px;
 max-width: 500px;
}

无论盒子里面是什么，它的宽度都不会小于 380 像素或大于 500 像素。这有帮助吗？

【讨论】：

如果你只有最小宽度，盒子可以永久展开
如果只扩展一个选项怎么办？我希望所有显示的框都相同。我知道这个级别的 CSS 老兄！
啊，对不起。我以为你把所有的问题都放在一个盒子里了...... :)