jquery - 取消隐藏左列中的元素时，相对定位的右列向下移动

Question

我正在尝试为我们的网站建立一个注册表格，除了一个烦人的问题外一切顺利。该表单有两列，用户可以在其中输入信息。当我开始为第一(左)列制作元素时，它会自动将它们定位到正确的位置，因此我完成了所有字段的制作并移至第二(右)列。为了避免溢出问题，我不得不用相对定位来定位它。现在在左栏中，我有一个下拉框，当选择了某个选项时，它会取消隐藏文本框。问题是当文本框变得可见时，整个右列向下移动。无论第一列中发生了什么，我都需要该列保留在原位，但不必使用绝对定位。如何做到这一点？这是 jsfiddle模拟我的问题。

请看一下那个 fiddle ，但由于 stackoverflow 需要它附带代码，这里是用于显示和隐藏文本框的 jQuery 脚本:

    $(document).ready(function () {
    $("#text1line").hide();
      $("select[name='select1']").change(function() {
        if ($(this).children("option:selected").attr("id") === "show")
        {
          $("#text1line").show();
        } 
        else 
        {
          $("#text1line").hide();
        }
      });
    });

Answer 1

使用 css 可见性属性而不是显示。

$(document).ready(function () {
    $("#text1line").css('visibility','hidden');
  $("select[name='select1']").change(function() {
    if ($(this).children("option:selected").attr("id") === "show")
    {
    $("#text1line").css('visibility','visible');
    } 
    else 
    {
    $("#text1line").css('visibility','hidden');
    }
  });
});