javascript – 当隐藏HTML div时,如何防止HTML div移动？

这是一个非常简单的 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中最初所示.

解决方法

而不是使用.hide(),将不透明度设置为0,或将可见性设置为隐藏

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

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

原文地址：https://www.jb51.cc/js/150979.html