html div 整体移动,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

}

div1

div2

div3

Hide div2

Show div2

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