Javascript 使用jQuery显示div。css问题

我有三个带

display:inline block

的div。在每个div中，当我试图用

$（'#div id'）显示隐藏div时，我都有带
显示的div:none
。显示（1000）

最近的div“跳转” 我应该换什么？我真的很喜欢看到迪夫在迪夫下面只是平局，左或右迪夫不会改变他的位置。

---

例如，有问题的两个div（hide div在文本框中显示为onchange）

当使用

display:none

时，元素根本不呈现，因此它不会在呈现的网页上使用任何空间。我认为您可能希望使用

可见性：hidden

来隐藏元素，但仍要进行空间使用率计算

---

编辑：jQuery方法似乎只在显示样式上起作用，因此我的答案不适用，而且确实需要固定偏移量以避免页面流中的副作用。

如果将div更改为使用float:left；使用指定的宽度可以避免“跳跃”

请参阅我的更新示例，网址为：

我更改了以下内容：

<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">

...

使用具有指定宽度的浮动

<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">

...

我还更改了submit按钮前面的

标记，以便它可以像这样清除浮动的div（不过，在我看来，有更好的处理方法）：

我添加了这个CSS：

#amount-div, #specific-div {
    width: 300px;
    vertical-align: top
}

没有

宽度的版本，您可能更喜欢它：

显示无将从文档中完全删除元素。不会有任何空间留给它。所以当你把它拿回来（表演）时，它会重新安排附近的演员。因此，请尝试使用visibility:hidden，它将保留空间，但保持div隐藏。
将HTML元素从
display:none
更改为
display:block
或其他值将始终导致它更改树中围绕它的其他元素的流。为了防止跳水运动员跳跃，你有几个选择。这里有几个简单的例子：

首先，您可以将该DIV“填充”到另一个具有固定大小的DIV中。例如：

<div style="width: 100%; height: 2em;">
    <div id="js-amount" style="display: none">    
        <p>You will achieve this goal by:</p>
        <p id="achieved-date"> <p>
        <p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
    </div>
</div>


您将通过以下方式实现此目标：


您的周限额将减少100美元

其次，您可以使用绝对定位从文档流中删除DIV：

<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">    
    <p>You will achieve this goal by:</p>
    <p id="achieved-date"> <p>
    <p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>


您将通过以下方式实现此目标：


您的周限额将减少100美元
尝试改用css的
可见性
属性，因为它保留了元素在流中的位置

文件：

例如：

<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>

plarp
slarp
必须为div设置一个固定的大小，这样当新的div出现时，它将受到给定侧的约束。我更新了你的JSFIDLE：

看看我是如何在CSS中约束div的大小的。为了改进布局，我冒昧地在submit按钮中添加了一些样式，所以HTML也做了一些修改

如果您在理解我的解决方案时遇到任何困难，请提出一些问题。
是的，这正是我需要的。刚刚增加了高度的div。工程像一个魅力
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>