时间戳

首页 > 解决方案 > 添加更多内容（例如图像）后，如何保持我的内容不会从网格内部移动？

javascript - 添加更多内容（例如图像）后，如何保持我的内容不会从网格内部移动？

问题描述

所以我在做一个石头剪刀布游戏，所以我可以玩 javaScript 和 Jquery，但我在使用 css 时遇到了麻烦。

我在哪里添加了我想要添加图像的段落，具体取决于用户在选择框中选择的内容。我添加了一个段落只是为了测试它，一旦我修复了我的 css，我会添加图像哈哈。

我希望第一个网格看起来与第三个网格完全一样，它上面还没有任何东西。

哦，我还有另一个问题，这是我第一次使用 Jquery，但我尝试发出警报但它不起作用，我做得对吗？

我的代码：

$( document ).ready(function() {
    console.log( "ready!" );
});
body{
	background-image: url(fondo.jpg);
	background-color: #F7B05B;
}

#titulo{
	background-color:#FCDE9C;
	font-family: 'Gloria Hallelujah', cursive;
	text-align:center;
	font-size: 25px;
	text-shadow: 2px 2px #ff0000;
	margin-left:80px;
	margin-right:80px;
}

.grid-container {
  display: grid;
  grid-column-gap:10px;
  grid-template-columns: 450px 360px 450px; /* 3 columnas */
  grid-template-rows: 450px;  /* una sola fila */
  margin:30px;
}

#usuario{
  grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
  grid-column-end: 1;
}

#computadora{
  grid-column-start: 3;
  grid-column-end: 3;
}

#resultado{
  border-color: #C7EF00;
  border-style: solid;
  background-color: #F3DFA2;
}

.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
	text-align: center;
	margin-top: 250px;
	position:relative;
	font-family: 'Indie Flower', cursive;
	font-size:25px;
}

.estilo{
  border-color: #F7CE5B;
  border-style: solid;
  border-width: 10px;
  background-color: #FE5F55;
  border-radius: 5px;
}

.botones{
	padding:20px;
	font-size:25px;
	font-family: 'Baloo Bhai', cursive;
	font-style:bold;
	border-radius: 8px;
	background-color: #2D3142;
	border:none; 
	color: #FCDEBE;
}

#nuevoIntento{
	padding: 20px;
	font-size:15px;
	font-family: 'Baloo Bhai', cursive;
	font-style:bold;
	border-radius: 8px;
	background-color: #561D25;
	border-color: #ECDD7B; 
	color: #FCDEBE;
	width:250px;
	border-style: outset;
	border-width: 7px;
	margin-top:25px;
}

#imageHolder{
	/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
	<script src="javascript1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
	<title>Piedra, Papel o Tijera</title> 
</head>

<body>
	<header id="titulo">
	<h1>PIEDRA, PAPEL O TIJERA!</h1>
	</header>
	<div class="grid-container">

		<div id="usuario" class="estilo">
			<div id="imageHolder">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
			</div>
			<br>
			<div class="texto">
				<h3>Seleccione una opción:</h3>
				<select id="seleccion" class="botones">
					<option value="Piedra">PIEDRA</option>
					<option value="Papel">PAPEL</option>
					<option value="Tijera">TIJERA</option>
				</select>
			</div>
		</div>

		<div id="resultado">
			<div class="texto">
				<p>Aca va mi resultado</p>
				<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
			</div>
		</div>

		<div id="computadora" class="estilo">
			<div class="texto">
				<h3>Haga click y espere resultado:</h3>
				<button class="botones"> Click me!</button>
			</div>
		</div>

	</div>
</body>
</html>

标签： javascriptjqueryhtmlcss

解决方案

你几乎做对了警报。具有讽刺意味的是，实际上是通过使用这个词来创建警报alert。这是 Vanilla（非 jQuery 或其他库）JavaScript，每个浏览器都支持。

$( document ).ready(function() {
    alert( "ready!" );
});

保持良好的工作！

推荐阅读