显示：容器元素上无打断jquery绝对定位计算子元素的子元素

HTML:

CSS:

我想用css属性display隐藏div#容器：none；因此，它在页面加载时隐藏，但它破坏了align_middle函数

当我通过$.get回调函数隐藏元素时，它工作得很好。（切换链接也可以工作。）

为什么会这样

小提琴：这个怎么样

---

只需要一点

$（“#show_link”）。触发器（'click'）

在“点击切换”功能之后，无需设置CSS

显示：无property完全删除或不处理浏览器中的元素，因此jQuery无法正确计算所需的内容。而是在CSS中使用Visibility属性并将其设置为hidden

更新的HTML:

.form {
    position: relative;
    border-color: brown;
    border-width: 3px;
    border-style: dotted;
    width: 150px;
    height: 150px;
    float:left;
    margin-left: 10px;
    overflow: hidden;
}
div#container{
    overflow: auto;
    margin-top: 10px;
}

<a href="" id="show_link">Show</a>
<div id="container" class="hide">
    <form class="form">
        <a href="" class="align_middle">Link1</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link2</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link3</a>
    </form>
</div>

.form
{
position:relative;
border-color:brown;
border-width:3px;
border-style:dotted;
width: 150px;
height: 150px;
float:left;
margin-left:10px;
overflow:hidden;
}

div#container
{
overflow:auto;
margin-top:10px;
}

.hide {
    visibility:hidden;
}

更新的jQuery:

.form {
    position: relative;
    border-color: brown;
    border-width: 3px;
    border-style: dotted;
    width: 150px;
    height: 150px;
    float:left;
    margin-left: 10px;
    overflow: hidden;
}
div#container{
    overflow: auto;
    margin-top: 10px;
}

<a href="" id="show_link">Show</a>
<div id="container" class="hide">
    <form class="form">
        <a href="" class="align_middle">Link1</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link2</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link3</a>
    </form>
</div>

.form
{
position:relative;
border-color:brown;
border-width:3px;
border-style:dotted;
width: 150px;
height: 150px;
float:left;
margin-left:10px;
overflow:hidden;
}

div#container
{
overflow:auto;
margin-top:10px;
}

.hide {
    visibility:hidden;
}

您实际上是在隐藏元素，您希望它的行为如何？你能再猜一点谜语吗？也许我应该更新一下小提琴，看看它是怎么断的？如果我把显示：无；在css for div#容器中，Link1、Link2和Link3不再居中。它实际上可以工作。：）为什么使用display:hidden？老实说，我不知道！：）从未见过或不得不寻找这样的问题！见马特斯的回答。无论如何，谢谢。：）谢谢你，伙计，这很有效，也解释了背后的原因。