这是一个非常简单的
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
