Question

我有以下代码，并且我正在努力使我的“DigDug”游戏的标题向右和横向与游戏本身一致，因此基本上标题直接位于游戏下方并完美排列，我想知道该怎么做呢？标题的id是“#DigCaption”，游戏本身的id是“#DigDug”。非常感谢您的任何帮助！

/*CSS file - Patrick White*/

body {
  width: 75%;
  margin: auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  position: relative;
  background: url('../Images/Black_Rainbow.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  min-width: 1200px;
  min-height: 950px;
}

body.video_games {
  min-height: 1030px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 225%;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 1%;
  border-style: solid;
  border-color: #006E5F;
}

h2,
h3 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 1.5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.7%;
  border-style: solid;
  border-color: #006E5F;
  border-width: 0.3em;
  margin: 0.35%;
}

.box {
  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35%;
  border-style: solid;
  border-color: #006E5F;
  border-width: 0.2em;
  margin: 1%;
  background-color: #111111;
}

.float_left {
  float: left;
}

p {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 0.4em;
  margin: 1em;
}

ul {
  margin-left: 10%;
  margin-right: 10%;
  padding: 1.1em;
  border-style: solid;
  border-color: #00594D;
  border-width: 0.4em;
  margin: 0.35em;
  margin-left: 1em;
}

table {
  border: 0.2em solid black;
  background-color: white;
}

th {
  border: 0.15em solid black;
  padding: 0.35em;
  text-align: center;
  font-weight: bolder;
}

td {
  border-width: 0.2em;
  border-style: solid;
  border-color: black;
  padding: 0.35em;
  color: black;
  font-weight: normal;
}

a:link {
  color: #31AEC5;
  /*dark blue*/
}

a:visited {
  color: #015261;
  /*darker blue*/
}

a:hover,
a:focus {
  color: #505050;
  /*grey*/
}

nav {
  clear: left;
  font-size: 1.2em;
  display: inline-block;
}

.gamebutton {
  background-color: #707070;
  /*grey*/
  border: none;
  color: #02849D;
  /*bright blue*/
  width: 35%;
  height: 25%;
  text-align: center;
  line-height: 400%;
  /*centers the text vertically*/
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: "Century Gothic";
  font-weight: bold;
}

.info {
  width: 40%;
  font-size: 1.25em;
  float: left;
}

.temp {
  font-style: italic;
}

.game_name_caption_dig {
  float: right;
  text-align: center;
  margin-right: 17%;
}

.game_name_caption_block {
  float: left;
  margin-left: 17%;
}

#main {
  color: #008B8B;
  clear: left;
}

#overview {
  color: #7FFFD4;
}

#overview:first-letter {
  font-size: 1.5em;
  font-family: "Times New Roman", sans-serif;
}

#DigDug {
  float: right;
  position: absolute;
  right: 0;
  border-width: 0;
}

#DigCaption {
  position: absolute;
  bottom: 0;
  font-size: 1em;
  padding: 1em;
}

#BlockGame {
  float: right;
  position: absolute;
  border-width: 0;
}

#skipnav {
  position: relative;
  right: 8%;
  width: 10.5em;
}


/* navigation menu styles */

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
}

nav ul li {
  float: left;
  margin-right: 0.7em;
}

nav ul li a {
  padding: 0.125em 0.5985243em;
  text-decoration: none;
  /* no underline */
  background-color: #55FA99;
  /* dark green */
  border: 0.14em solid black;
  border-top-left-radius: 1em 1em;
  /* rounded corner */
  border-top-right-radius: 1em 1em;
  /* rounded corner */
}

nav ul li a:hover,
nav ul li a:focus {
  color: #014C65;
  background-color: #006E5F;
  /*medium green*/
  font-weight: bold;
}

.nav_menu {
  border: 0;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <link type="text/css" rel="stylesheet" href="Styles/MyStyle.css" media="screen">
      <link rel="icon" href="Images/favicon-16x16.png" type="image/png">
      <title>Web Portfolio: Patrick White's Video Games Page</title>
   </head>
   <body class="video_games">
  <div class="box" id="skipnav">
     <a href="#main">Skip to main content</a>
  </div>
  <h1>Video Games</h1>
  <div class="nav_menu">
     <nav>
        <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="Accesibility.html">Accessibility</a></li>
           <li><a href="Usability.html">Usability</a></li>
           <li><a href="Graphics.html">Graphics</a></li>
           <li><a href="JavaScript.html">JavaScript</a></li>
           <li><a href="Tools.html">Tools</a></li>
           <li><a href="Video.html">Video</a></li>
           <li><a href="Games.html">Video Games</a></li>
           <li><a href="Maps.html">Map</a></li>
        </ul>
     </nav>
  </div>
  <main id="main">
  <h2 class="game_name_caption_dig">Dig Dug</h2>
  <h2 class="game_name_caption_block">Bloxorz</h2>
  <br/><br/><br/><br/>
     <div id="DigDug">
        <iframe height="576" width="600" src="http://static.arcadespot.com/embed/dig-dug/"></iframe>
        <!--the validator says that there are errors in the above code because the iframe attribute is obsolete, but that actually is necessary in the source pulling from the embed so I can't change that on my end, since that will actually make the embed source not work-->
     </div>
     <div id="DigCaption">
        Click on the wrench to configure the controls! (If it starts automatically hit 
        enter)<br/>If it doesn't work ensure that you have the latest edition of flash, and that
        it's also enabled. Also these games don't work on computers with
        games blocked on them (ie. the school computers)
     </div>
     <div id="BlockGame">
        <iframe height="576" width="600"src="http://www.freeonlinegames.com/embed/142936"></iframe>
        <!--the validator says that there are errors in the above code because the iframe attribute is obsolete, but that is actually a part of the embed source, so I can't change that without the embed source not functioning-->
     </div>
  </main>
   </body>
</html>

Answer 1

jQuery UI会为每个裁剪框架.cropFrame添加#imgContainer元素，因此要定位这些元素，您可以使用:nth-child()个选择器。要定位您的第一个，请使用.cropFrame:not(:last-child)并定位最后一个.cropFrame:last-child。

＆＃13;

$(function() {

  $("#choice1").on('change', function() {
    $("#elements").hide();
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

$(function() {

  $("#choice2").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

＆＃13;

.cropFrame:not(:last-child) {
  border: 1px solid red;
}
.cropFrame:last-child {
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.css" rel="stylesheet"/>
<script src="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<form>
  <div id='imgContainer'>
    <div id='elements'>
      <input type='file' id='choice1'>
    </div>
  </div>
  <input type='file' id='choice2'>
</form>

＆＃13;

如何向右侧发送文字并与另一个部门对齐

1 个答案: