个人中心
gpt4 book ai didi

css - 中框不在同一位置，大小不一

转载 作者：行者123 更新时间：2023-11-28 02:45:08 26 4
gpt4 key购买 nike

我是 CSS 初学者所以请不要笑! :) 我几乎尝试了一切，但没有帮助。我的中间盒子需要与其他盒子大小相同，并且需要在相同的位置 This is the problem请给出你的意见并尽快因为我真的没有时间......谢谢!因为我的文字太短，我无法上传它我会添加更多的文字。对不起，因为我的英语说得不是很好。还有一件事......当我用 Javascript 单击按钮时，如何让这些框缓慢显示。我不希望它出现在 JQuery 中! 

*{
    margin:0;
    padding:0;
}

#left {
	float:left;
	display: block;
  display: inline-block;
  width: 300px;
  border: 3px solid #0080ff;
  padding: 20px;
  margin: 56px;
	vertical-align:-200%;
	font-family:arial;
	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 {
	-moz-box-align: center;
	top: 50%;
	position: relative;
	margin-top: -50px;
	display:block;
  display: inline-block;
  width: 300px;
  border: 3px solid #0080ff;
  padding: 30px;
  margin: 30px 0px;
	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: 20px;
  margin: 56px 54px;
	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="java2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.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>

最佳答案

对于问题的第二部分，试试这个:

.animate {
       -webkit-animation-name: example;
       -webkit-animation-duration: 4s;
}

@keyframes example {
    from {visibility: hidden;}
    to {visibility: visibile;}
}

Javascript:

var leftBtn = document.getElementById("Insert Button Id Here");
var leftBox = document.getElementById("left");
leftBtn.onclick = startLeftAnimation;

function startLeftAnimation() {
    leftBox.classList.add("animate");
}

在这种情况下，CSS 动画应该更简洁。涉及的代码更少，调试起来也更容易。

关于css - 中框不在同一位置，大小不一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46962084/

26 4 0
文章推荐： javascript - 获取移动设备上的视口(viewport)大小
文章推荐： javascript - JSlint 错误 selectedDate 已定义
文章推荐： javascript - 我可以使用 HTML5 文件 API 预览 PDF 吗？
文章推荐： javascript - 使用 jQuery 的 ShortKeys 插件检测转义键
行者123
个人简介

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

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