当我隐藏第一个div时，Div元素向左移动

时间：2017-10-27 20:05:53

标签： html css

我有一个问题，我有3个盒子，当你按下按钮时它们正在显示和隐藏。问题是，当我隐藏第一个框时，中间框向左移动...这是显示所有三个框的网站 - All boxes showed。这是当我关闭第一个时发生的事情 - The problem。我还有一个问题......第3个盒子远离其他盒子而且太靠近右侧 - The 3rd box problem。请帮帮我，谢谢！ ：D 

body, html {
    height: 100%;
    margin: 0px;
}
body {
    background-size: auto 120%;
    background-repeat: no-repeat;
    background-position: right !important;
}
  
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0074D9;
}

li {
    float: left;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	color: white !important;
	font-family:arial;
}

li a:hover:not(.active) {
    background-color: #0047b3 !important;
}

.active {
    background-color:#0047b3;
}

a:link{
	color:#0074D9;
}
a:visited{
	color:#0074D9;
}
a:hover{
	color:#001f3f;
}
a:active{
	color:#001f3f;
}

hr{
	height:3px;
	background-color:#0080ff;
	border:0px;
	transform: translateY(-95%);
	margin: 35px -9999rem;
    padding: 0.10rem 9999rem;
}
button{
	background-color:#0074D9;
	border-radius:10px;
	font-family:arial;
	border-color:transparent;
	padding:9px;
	font-size:18;
	width:150px;
	color: white;
	letter-spacing:1px;
	text-align: center;
	vertical-align: middle;
	line-height: 27px;
	display:inline-block;
	margin-left: 80px;
	margin-right: 80px;
}
button:visited{
	color:#0074D9;
}
button:hover{
	background-color:#0047b3;
}
button:active{
	color:#0047b3;
}

*{
    margin:0;
    padding:0;
}

#left {
	float:left;
	display: block;
    display: inline-block;
    width: 300px;
    border: 3px solid #0080ff;
    padding: 30px 25px;
    margin: 56px;
	vertical-align:-200%;
	font-family:arial !important;
	border-radius:25px;
	color:white;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}


#middle {
	bottom:50%;
	display:block;
    display: inline-block;
    width: 300px;
	position:fixed !important;
	top:30% !important;
    border: 3px solid #0080ff;
    padding: 30px;
    margin: 30px;
	margin-left:-20px !important;
	margin-right:-20px !important;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}
	
#right {
	float:right;
	display: block;
    display: inline-block;
    width: 300px;
    border: 3px solid #0080ff;
    padding:30px;
    margin: 56px 25px -20px !important;
	vertical-align:-200%;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}

#left, #middle, #right{
	height: 130px
}



	
<!DOCTYPE>
<html>
<head>
<title>Moj web</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="java2.js"></script>
<script src="js/scripts.js"></script>
</head>
<link rel="stylesheet" href="style.css"> 
<body background="http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
<br>
<br>
<script>
function showDiv() {
    var x = document.getElementById("welcomeDiv");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
<script>
function showDiver() {
    var x = document.getElementById("welcomeDiver");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>
<script>
function showDiverer() {
    var x = document.getElementById("welcomeDiverer");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

<center><div>
<button onclick="showDiv()" style= "margin-right: 75px">Pritisni me!</button>
<button onclick="showDiverer()" style= "margin-right: 75px">Pritisni me!</button>
<button onclick="showDiver()" style= "margin-right: 75px">Pritisni me!</button>
</div></center>
<br>
<br>
<div id="welcomeDiv" style="display:none;">
<div  id="left">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<div id="welcomeDiver" style="display:none;">
<div id="right">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<div id="welcomeDiverer" style="display:none;">
<div  id="middle">
<p>Zdravo, ja sam Kenan!<br>
Ovo je moja testna stranica na kojoj radim dosta kratko!<br>
Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
</p>
</div>
</div>
<br>
</body>
</html>

3 个答案:

答案 0 :(得分：2)

在这种情况下，您只需确保仅设置＆＃34;可见性＆＃34;隐藏并保持＆＃34;显示＆＃34;它怎么样。这将确保没有内容被移动＆＃34;，因为＆＃34;隐藏＆＃34;元素永远不会被删除＆＃34;只能隐藏。

此外，如果您要明确设置左侧和顶部位置，浏览器通常会在渲染时将此考虑在内。

答案 1 :(得分：0)

为什么不修复像

这样的中间div的Left属性 
left: 50%;

或

左：250px;

复制下面的代码以检查更改。如果它是posibble为什么你不使用bootstrap css

＆＃13;
＆＃13; 
body, html {
    height: 100%;
    margin: 0px;
}
body {
    background-size: auto 120%;
    background-repeat: no-repeat;
    background-position: right !important;
}
  
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0074D9;
}

li {
    float: left;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	color: white !important;
	font-family:arial;
}

li a:hover:not(.active) {
    background-color: #0047b3 !important;
}

.active {
    background-color:#0047b3;
}

a:link{
	color:#0074D9;
}
a:visited{
	color:#0074D9;
}
a:hover{
	color:#001f3f;
}
a:active{
	color:#001f3f;
}

hr{
	height:3px;
	background-color:#0080ff;
	border:0px;
	transform: translateY(-95%);
	margin: 35px -9999rem;
    padding: 0.10rem 9999rem;
}
button{
	background-color:#0074D9;
	border-radius:10px;
	font-family:arial;
	border-color:transparent;
	padding:9px;
	font-size:18;
	width:150px;
	color: white;
	letter-spacing:1px;
	text-align: center;
	vertical-align: middle;
	line-height: 27px;
	display:inline-block;
	margin-left: 80px;
	margin-right: 80px;
}
button:visited{
	color:#0074D9;
}
button:hover{
	background-color:#0047b3;
}
button:active{
	color:#0047b3;
}

*{
    margin:0;
    padding:0;
}

#left {
	float:left;
	display: block;
    display: inline-block;
    width: 300px;
    border: 3px solid #0080ff;
    padding: 30px 25px;
    margin: 56px;
	vertical-align:-200%;
	font-family:arial !important;
	border-radius:25px;
	color:white;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}


#middle {
	left: 40%;
	bottom:50%;
	display:block;
    display: inline-block;
    width: 300px;
	position: fixed !important;;
	top:30% !important;
    border: 3px solid #0080ff;
    padding: 30px;
    margin: 30px;
	margin-left:-20px !important;
	margin-right:-20px !important;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}
	
#right {
	float:right;
	display: block;
    display: inline-block;
    width: 300px;
    border: 3px solid #0080ff;
    padding:30px;
    margin: 56px 25px -20px !important;
	vertical-align:-200%;
	font-family:arial;
	border-radius:25px;
	color:#ffffff;
	text-shadow: 2px 1px #0080ff;
	font-style: oblique;
	letter-spacing:1px;
	font-size:18;
	background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ), url('http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg');
    -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
}

#left, #middle, #right{
	height: 130px
}
＆＃13; 
<!DOCTYPE>
<html>

<head>
    <title>Moj web</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="java2.js"></script>
    <script src="js/scripts.js"></script>
</head>
<link rel="stylesheet" href="style.css">

<body background="http://img.wallpaper.sc/desktop/images/5k/desktop-pc-5120x2880-wallpaper_00019.jpg">

    <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
    <br>
    <br>
    <script>
        function showDiv() {
            var x = document.getElementById("welcomeDiv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
    <script>
        function showDiver() {
            var x = document.getElementById("welcomeDiver");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
    <script>
        function showDiverer() {
            var x = document.getElementById("welcomeDiverer");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

    <center>
        <div>
            <button onclick="showDiv()" style="margin-right: 75px">Pritisni me!</button>
            <button onclick="showDiverer()" style="margin-right: 75px">Pritisni me!</button>
            <button onclick="showDiver()" style="margin-right: 75px">Pritisni me!</button>
        </div>
    </center>
    <br>
    <br>
	
  

		<div id="welcomeDiv" style="display:none;">
			<div id="left">
				<p>Zdravo, ja sam Kenan!<br> Ovo je moja testna stranica na kojoj radim dosta kratko!<br> Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
				</p>
			</div>
		</div>
		<div id="welcomeDiver" style="display:none;">
			<div id="right">
				<p>Zdravo, ja sam Kenan!<br> Ovo je moja testna stranica na kojoj radim dosta kratko!<br> Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
				</p>
			</div>
		</div>
		<div id="welcomeDiverer" style="display:none;">
			<div id="middle">
				<p>Zdravo, ja sam Kenan!<br> Ovo je moja testna stranica na kojoj radim dosta kratko!<br> Na ovoj stranici mozete viditi HTML, CSS i JS jezike!<br>
				</p>
			</div>
		</div>
	
    <br>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

据我所知，这个问题可以解决问题的原作者，因为他已经标出了最佳答案，但对于那些面临类似问题的人，我会提出一些可能更重要的想法。实际项目的背景：

  1. 当您的访问者从较小的设备（笔记本电脑，平板电脑或手机）查看时，使用固定像素或百分比值定位元素可能会破坏您的页面设计
  2. 请注意，隐藏display或visibility属性不能顺利处理转换，因此如果您需要设置此类隐藏效果的动画，请使用{{ 1}}或任何其他合适的技术
  3. 查看代码 - 有Jquery连接，使用从w3schools取得的3个类似脚本不是很奇怪吗？为什么不尝试原生jquery opacity，这里是a quick link
  4. 永远不要忘记使用语义和清除标记。如果您有单独的样式表文件，为什么要将样式内联？只需将它们放入CSS文件
    5. 即可
相关问题
最新问题