javascript - 当隐藏左侧的 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 设置为 隐藏

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

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