所以我正在玩剪刀石头布游戏，这样我就可以玩 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!" );
});
继续努力!
关于javascript - 添加更多内容(例如图像)后，如何保持我的内容不从网格内部移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59724567/