当隐藏HTML左边的HTML div时,如何保持HTML div不移动？

Question

这是一个非常简单的jsFiddle:

function hideDiv2() {
  $('.div2').hide();
}

function showDiv2() {
  $('.div2').show();
}

.div1 {
  height: 300px;
  width: 20%;
  background-color: red;
  float: left;
}
.div2 {
  height: 300px;
  width: 20%;
  background-color: green;
  float: left
}
.div3 {
  height: 300px;
  width: 35%;
  background-color: pink;
  float: left
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>

<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>

在HTML中创建3个div,并提供两个按钮来隐藏和显示中间div.我想知道的是当div2被隐藏时,我如何保持div3不向左滑动.换句话说,无论div2是隐藏还是可见,我都希望div3保持在原始位置.但是,需要显示初始HTML页面,其中所有3个div都可见,如jsFiddle中最初所示.

Answer 1

而不是使用.hide(),设置opacity到0或设置visibility到hidden

$('.div2').css('visibility', 'hidden');

注意:不透明度在IE <9中不起作用