Question

我有一个测验，有四个选项可供选择。每个问题都有不同的选项，有时选项的长文本不适合我的固定大小框（比如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函数，它的大小取决于文本的大小

Answer 1

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

Answer 2

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

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

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

制作动态大小的盒子

2 个答案: