Question

我有三个display: inline-block的div。在每个div中，当我试图用display: none最近的divs'跳转'显示隐藏div时，我有$('#div-id').show(1000) div 我应该改变什么？我喜欢看div下的div只是绘制而左边或右边的div不会改变他的位置。例如，我的问题there的两个div（隐藏div在文本框中显示onchange）

Answer 1

http://jsfiddle.net/WZCJu/13/

我添加了这个CSS：

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

没有width的版本，你可能会更喜欢它：

http://jsfiddle.net/WZCJu/15/

Answer 2

尝试使用css的visibility属性，因为它保留了元素在流中的位置。

文档：http://www.w3schools.com/css/pr_class_visibility.asp

示例：

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

Answer 3

如果你改变div使用float：left;如果指定宽度，您可以避免“跳转”。

请参阅我的更新示例：http://jsfiddle.net/WZCJu/12/

我更改了以下内容：

<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;">

我还更改了提交按钮之前的<br>标记，以便它会像这样清除浮动的div（但是，在我看来，有更好的处理方法）：

<br style="clear:both">

Answer 4

使用display: none时，元素根本不会渲染，因此它不会在渲染的网页上使用任何空格。我想您可能希望使用visibility:hidden来隐藏您的元素，但仍会进行空间使用计算。

编辑：看来jQuery方法只适用于显示样式，所以我的答案不适用，实际上需要一个固定的偏移来避免页面流中的副作用。

Answer 5

display none从文档中完全删除元素。那里不会留下任何空间。所以当你把它带回来（显示）时，它会重新排列附近的div。所以尝试使用visibility：hidden，它将保留空间，但保持div隐藏..

Answer 6

将HTML元素从display: none更改为display: block或其他值将始终使其更改树中其他元素的流量。为了防止DIV跳转，你有几个选择。这里有几个简单的：

首先，你可以用另一个固定大小的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>

其次，您可以使用绝对定位从文档流中删除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>

Answer 7

您必须为div设置固定大小，因此当新的div出现时，它会受到给定方的约束。我更新了你的JSFiddle：http://jsfiddle.net/WZCJu/16/

看看我如何限制CSS中div的大小。为了改进布局，我冒昧地为提交按钮添加了一些样式，所以HTML也有一点修改。

如果您在理解我的解决方案时遇到任何问题，请提出一些问题。

用jQuery显示div。 css问题

7 个答案: