Html 3个并排的框，切换通过下拉列表显示的框

我的手指在上面

我有3个下拉框，下面是三个隐藏的div。当选择“否”时，我希望它正下方的框显示出来

我不希望它总是显示在左边。我想中间的下拉列表下的中间框，如果没有选择在中间，其他两个隐藏，除非其中之一也被选中。如果用户在两个框中选择“否”，则我希望显示两个框

我试过让它们浮起来，但当一个隐藏一个显示时，填充物就消失了。绝对位置不起作用，因为有一排这样的位置，它们会重叠

我希望我清楚我在这里要做什么

<table style="padding-left: 56px; padding-top: 3px;">
    <tr>
        <td style="width: 421px;">
            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl1">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
        <td style="width: 421px;">
            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl2">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
        <td style="width: 421px;">

            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl3">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
    </tr>
</table>
<div style="padding-left: 56px;" class="">
    <div class="box1" style="display:inline-block; height: 150px; width: 415px;">
        <span>box1</span>
        <br/>
        <br/>
        <textarea style="height: 149px; width: 328px;"></textarea>

    </div>
    <div class="box2" style="display: inline-block; height: 150px; width: 409px;">
        <span>box2</span>
        <br/>
        <br/>
        <textarea style="height: 149px; width: 328px;"></textarea>

    </div>
    <div class="box3" style="display:inline-block; height: 150px;  width: 409px;">
        <span>box3</span>
        <br/><br/>
        <textarea style="height: 149px;  width: 328px;"></textarea>

    </div>
</div>

---

更改后更新答案

给一个班说。盒子到盒子，浮动它，使它们在一条线上。我还设置了框的宽度以及文本区域！重要的您应该删除文本区域和框的内联宽度，然后删除它！重要的

---

我认为可以使用jquery切换将其简化为：

$[class^='box'。隐藏； $ddl1.onchange，函数{ $'.box1'.切换$：选中，this.text==否； }; $ddl2.onchange，函数{ $'.box2'.切换$：选中，this.text==否； }; $ddl3.onchange，函数{ $'.box3'。切换$：选中，this.text==否； }; 对 不 对 不 对 不 框1 框2 框3

---

尝试下面的示例，希望对您有所帮助

.box1, .box2, .box3{
    visibility: hidden;
}
#wrapper{
    width:95%;
    overflow:auto;
}

---

谢谢，刚刚运行了JSFIDLE，点击上面的链接查看新的。这不是问题，所以这不是答案。问题是方框位置上的css。左边的方框应该在左边的ddl下面，中间在中间，右边在右边。当方框变为可见时，它不会解决方框位置问题。我这更像是一个css问题，但我喜欢你在文本上使用jquery切换所做的。嗯，可见性而不是显示无的问题在于，它会向下推我页面上的所有其他元素，即使在所有框都隐藏的情况下。可见性css属性有两个用途：隐藏值隐藏一个元素，但会在其中留出空间een.collapse值隐藏了表的行或列。它也会折叠XUL元素。废话，不得不重新考虑一下，因为它不起作用，我有7行这样的选择。无需担心。如果你有网站的url，发布它，我会在有时间时帮你：

.box1, .box2, .box3{
    visibility: hidden;
}
#wrapper{
    width:95%;
    overflow:auto;
}