Question

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

请看一下这个小提琴，但是由于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 visibility属性而不是display。

$(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');
    }
  });
});

Answer 2

在这种情况下，我建议使用浮动并在左/右列上设置宽度。所以你的CSS会变成这样：

.leftcol, .rightcol {
   float: left;
   width: 50%;
}

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

2 个答案:

DEMO