在添加更多内容(例如图像)后，如何保持内容不从网格内部移动?

所以我在做一个石头，纸，剪刀游戏，所以我可以用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>

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

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

继续努力！

您的内容刚刚从容器底部溢出。.texto上的margin-top设置为250px，这太高了。只需将其设置为较小的数字，它就会正确显示。相反，如果您希望整个框拉伸以适合其内容，则需要删除行grid-template-rows: 450px;，因为它定义了行的高度。

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 */
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>

相关内容

最新更新

热门标签：