html - 无法让 Image 浮动到顶部。需要它在页面中的表格旁边

Question

我已经按照我想要的方式格式化了图像，但我无法让它浮到顶部，所以它在我制作的表格旁边看起来不错。我试过制作一个 div 并让它浮起来无济于事。帮助？

header {
  background-color: #030303;
  color: #ffffff;
  height: 60px;
  text-align: left;
  padding-top: 30px;
  padding-left: 3em;
  background-image: url("assets/dndlogo.jpg");
  background-repeat: no-repeat;
  background-position: right;
}

#dndlogo {
  float: right;
  height: 50px;
}

header h1 {
  font-family: Georgia, "Times New Roman", Serif;
  margin-top: 0px;
  font-size: 3em;
  letter-spacing: 0.25em;
}

#schedulebox {
  float: left;
  height: 750px;
  width: 15%;
  float: left;
  background-color: #bd0202;
  text-align: center;
}

#homecontent {
  height: 750px;
  width: 84.3%;
  float: left;
  background-color: #030303;
  color: white;
}

nav {
  overflow: hidden;
  background-color: #030303;
  font-family: Arial;
  float: top;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

nav li {
  float: left;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 15px 20px;
  text-decoration: none;
  list-style-type: none;
  color: white;
  height: 15px;
}


/*nav li:hover{
    background-color: white;
    border-radius: 15px;
    transition: 0.5s;
    color: black;
}*/

nav ul {
  margin: 0;
  padding-bottom: 10px;
  padding-left: 0;
}

footer {
  background-color: #030303;
  float: bottom;
  color: white;
}

#schedulebox h1 {
  border-bottom: solid;
  padding-top: 0;
  margin: 0;
}

html {
  background-color: #030303;
}

button {
  background-color: #030303;
  border: none;
  color: white;
  font-size: 20px;
  height: 27px;
}

button:hover {
  background-color: white;
  color: #030303;
  border-radius: 5px;
  transition: 0.5s;
}

main {
  border: white solid;
  border-radius: 10px;
  order-radius: 10px;
}

#wrapper {
  padding: 20px;
}

#schedulebox {
  border-right: white solid;
}

#dragonpic {
  width: 1556.5px;
  height: auto;
}

#homecontent2 {
  border: solid white;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#homecontent h2,
#homecontent h3 {
  padding-left: 10px;
}

#resourcescontent {
  color: white;
  padding-left: 10px;
}

a img:visited {
  border: black;
}

a img:hover {
  border: white solid;
  border-width: thin;
  transition: 0.3s;
}

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  border: none;
  color: white;
  text-decoration: none;
  height: 20px;
  padding: 5px;
  font-size: 20px;
}

a.button:hover {
  background-color: white;
  color: #030303;
  transition: 0.3s;
  border-radius: 5px;
}

#beyondlogo {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  display: block;
  border-radius: 10px;
}

#resourcescontent p,
#resourcescontent h2 {
  text-align: center;
}

form {
  color: white;
}

label {
  float: left;
  display: block;
  text-align: right;
  width: 120px;
  padding-right: 1em;
}

input,
textarea {
  display: block;
  margin-bottom: 20px;
}

#joiningcontent h2 {
  color: white;
  padding-left: 20px;
  width: 20%;
  text-align: center;
}

#joiningpic {
  margin-left: auto;
  margin-bottom: auto;
  width: 50%;
  display: block;
  border-radius: 10px;
}

#joiningcontent {}

<div id="wrapper">
  <header>
    <h1>Dungeons and Dragons: WCTC</h1>
  </header>
  <main class="clearfix">
    <nav>
      <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="resources.html" class="button">Resources</a></li>
        <li><a href="joining.html" class="button">Join Us!</a></li>
      </ul>
    </nav>
    <div id="joiningcontent">
      <h2>If you wish to join, provide us with some information so we can contact you!</h2>
      <form>
        <label for="FirstName">First Name:</label>
        <input type="text" id="FirstName" name="FName" required>
        <label for="LastName">Last Name:</label>
        <input type="text" id="LastName" name="LName" required>
        <label for="emailboi">Email:</label>
        <input type="email" id="emailboi" name="Email" required>
        <label for="GuestOrMember">Are you signing up as a Guest?</label>
        <input id="GuestOrMember" type="checkbox">
        <button type="submit" value="submit">Submit</button>
      </form>
      <img src="assets/signuppic.png" id="joiningpic">
    </div>
  </main>
</div>

我仍然对该怎么做有点迷茫，而且我对 Web 开发还很陌生，所以我为所犯的任何业余错误表示歉意。

标签： htmlcss

Answer 1

为了正确工作float，浮动元素应该是第一个。只需img作为父元素中的第一个元素移动，如下所示：

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Dungeons and Dragons: WCTC</h1>
    </header>
    <main class="clearfix">
        <nav><ul><li><a href="index.html" class="button">Home</a></li>  <li><a href="resources.html" class="button">Resources</a></li>  <li><a href="joining.html" class="button">Join Us!</a></li></ul></nav>
        <div id="joiningcontent">
          <img src="assets/signuppic.png" id="joiningpic">
          <h2>If you wish to join, provide us with some information so we can contact you!</h2>
          <form>
            <label for="FirstName">First Name:</label>
            <input type="text" id="FirstName" name="FName" required>
            <label for="LastName">Last Name:</label>
            <input type="text" id="LastName" name="LName" required>
            <label for="emailboi">Email:</label>
            <input type="email" id="emailboi" name="Email" required>
            <label for="GuestOrMember">Are you signing up as a Guest?</label>
            <input id="GuestOrMember" type="checkbox">
            <button type="submit" value="submit">Submit</button>
        </form>

        </div>
    </main>
</div>

</body>
</html>

更新2

header{
        background-color: #030303;
        color:#ffffff;
        height: 60px;
        text-align: left;
        padding-top: 30px;
        padding-left: 3em;
        background-image: url("assets/dndlogo.jpg");
        background-repeat: no-repeat;
        background-position: right;
    }
    
    #dndlogo{
        float: right;
        height: 50px;
    }
    
    header h1{
        font-family: Georgia, "Times New Roman", Serif;
        margin-top: 0px;
        font-size: 3em;
        letter-spacing: 0.25em;
    }
    
    #schedulebox{
        float: left;
        height: 750px;
        width: 15%;
        float: left;
        background-color: #bd0202;
        text-align: center;
    }
    
    #homecontent{
        height: 750px;
        width: 84.3%;
        float: left;
        background-color: #030303;
        color: white;
    }
    
    nav {
        overflow: hidden;
        background-color: #030303;
        font-family: Arial;
        float: top;
        margin: 0;
        padding: 0;
        border-radius: 10px;
    }
    
    nav li{
        float: left;
        font-size: 20px;
        color: black;
        text-align: center;
        padding: 15px 20px;
        text-decoration: none;
        list-style-type: none;
        color: white;
        height: 15px;
    }
    
    /*nav li:hover{
        background-color: white;
        border-radius: 15px;
        transition: 0.5s;
        color: black;
    }*/
    
    nav ul{
        margin: 0;
        padding-bottom: 10px;
        padding-left: 0;
    }
    
    footer{
        background-color: #030303;
        float: bottom;
        color: white;
    
    }
    
    #schedulebox h1{
        border-bottom: solid;
        padding-top: 0;
        margin: 0;
    }
    
    html{
        background-color: #030303;
    }
    
    button{
        background-color: #030303;
        border: none;
        color: white;
        font-size: 20px;
        height: 27px;
    }
    
    button:hover{
        background-color: white;
        color: #030303;
        border-radius: 5px;
        transition: 0.5s;
    }
    
    main{
        border: white solid;
        border-radius: 10px;
        order-radius: 10px;
    }
    
    #wrapper{
        padding: 20px;
    }
    
    #schedulebox{
        border-right: white solid;
    }
    
    #dragonpic{
        width: 1556.5px;
        height: auto;
    }
    
    #homecontent2{
        border: solid white;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    #homecontent h2, #homecontent h3{
        padding-left: 10px;
    }
    
    #resourcescontent{
        color: white;
        padding-left: 10px;
    }
    
    a img:visited{
        border: black;
    }
    
    a img:hover{
        border: white solid;
        border-width: thin;
        transition: 0.3s;
    }
    
    a.button {
        -webkit-appearance: button;
        -moz-appearance: button;
        border: none;
        color: white;
        text-decoration: none;
        height: 20px;
        padding: 5px;
        font-size: 20px;
    }
    
    a.button:hover{
        background-color: white;
        color: #030303;
        transition: 0.3s;
        border-radius: 5px;
    }
    
    #beyondlogo{
       margin-left: auto;
        margin-right: auto;
        width: 50%;
        display: block;
        border-radius: 10px;
    }
    
    #resourcescontent p, #resourcescontent h2{
        text-align: center;
    }
    
    form{
        color: white;
        display: inline-block;
        vertical-align: top;
        max-width: 40%;
        box-sizing: border-box;
    }
    
    label{
        float: left;
        display: block;
        text-align: right;
        width: 120px;
        padding-right: 1em;
    }
    
    input, textarea{
        display: block;
        margin-bottom: 20px;
    
    }
    
    #joiningcontent h2{
        color: white;
        padding-left: 20px;
        width: 20%;
        text-align: center;
    }
    
    #joiningpic{
        margin-left: auto;
        margin-bottom: auto;
        width: 50%;
        border-radius: 10px;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }
    
    #joiningcontent{
    
    }

<div id="wrapper">
    <header>
        <h1>Dungeons and Dragons: WCTC</h1>
    </header>
    <main class="clearfix">
        <nav><ul><li><a href="index.html" class="button">Home</a></li>  <li><a href="resources.html" class="button">Resources</a></li>  <li><a href="joining.html" class="button">Join Us!</a></li></ul></nav>
        <div id="joiningcontent">
          
        <h2>If you wish to join, provide us with some information so we can contact you!</h2>
        
        <form>
            <label for="FirstName">First Name:</label>
            <input type="text" id="FirstName" name="FName" required>
            <label for="LastName">Last Name:</label>
            <input type="text" id="LastName" name="LName" required>
            <label for="emailboi">Email:</label>
            <input type="email" id="emailboi" name="Email" required>
            <label for="GuestOrMember">Are you signing up as a Guest?</label>
            <input id="GuestOrMember" type="checkbox">
            <button type="submit" value="submit">Submit</button>
        </form>
        
        <img src="assets/signuppic.png" id="joiningpic">
            
        </div>
    </main>
</div>