个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:09:26 25 4
gpt4 key购买 nike

我有一个问题，我有 3 个框，当您按下按钮时它们会显示和隐藏。问题是当我隐藏第一个框时，中间的框向左移动...这是显示所有三个框时的网站- All boxes showed .这是我关闭第一个时发生的情况- The problem .我还有一个问题......第三个盒子远离其他盒子并且太靠近右侧 - 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>

最佳答案

在这种情况下，您只需确保仅将“可见性”设置为隐藏，并保持“显示”的原样。这将确保没有内容被“移动”，因为“隐藏”元素从未被“移除”，而只是被隐藏。

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

关于html - 当我隐藏第一个 div 时，div 元素向左移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46982638/

25 4 0
文章推荐： c++ - 在多线程中使用 stxxl
文章推荐： html - 在某些屏幕尺寸上，div 移动到 div 之上
文章推荐： if 语句的 C++ GUI 条件始终为真
文章推荐： javascript - 如何通过使用 javascript/jquery 调用使用 .bat 文件自动打印
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com