javascript - 如何在 <div> 标签中左右浮动元素？

Question

我无法格式化https://evolveyourgaming.com/extensions/ecademy.php正确。我无法将图像置于 float:left(其名称在下方)，并将 BIOS 置于 float:right。目前，我的 VS Code 为我的所有 Float 属性提供了黄色波浪线。谁能提供任何见解，因为 CSS 不是我的强项。

function condenseLinks() {
  var x = document.getElementById("links");
  if (x.className === "vidlinks") {
    x.className += " responsive";
  } else {
    x.className = "vidlinks";
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  height: 100%;
  text-align: center;
  display: inline-block;
}

.vidbody {
  background-color: black;
  height: 100%;
  display: inline-block;
}

.logo {
  float: left;
  max-width: 90%;
  padding-top: 6px;
}

.vidhead {
  background-color: black;
  position: relative;
  height: 10%;
  width: 100%;
}

body {
  background-color: black;
  background-size: cover;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.container {
  width: 90%;
  max-width: 120rem;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.teamBios .container {
  display: flex;
}

.container img {
  float: left;
}

.teamBios .about-details {
  flex: 1;
}

.vidlinks {
  float: right;
  width: 45%;
  text-decoration: none;
  color: white;
  font-family: cairo, sans-serif;
  font-style: normal;
  font-weight: 200;
  padding-top: 16px;
}


/* Hide the link that should open and close the topnav on small screens */

.vidlinks .icon {
  display: none;
}


/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.left {
  width: 40%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.right {
  width: 40%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.mid {
  text-align: center;
  display: inline-block;
  width: 10%;
}

.vidlinks a {
  color: white;
}


/* Add a dark background on topnav links and the dropdown button on hover */

.vidlinks a:hover,
.dropdown:hover .dropbtn {
  color: #7e3bfe;
}


/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  color: #8449ff;
}


/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .mid {
    display: none;
  }
  .left {
    width: 80%;
  }
  .right {
    width: 80%;
  }
  .vidbody {
    background-color: black;
    height: auto;
    width: auto;
    display: inline-block;
  }
  .vidlinks {
    text-align: center;
    width: 90%;
    text-decoration: none;
    color: white;
    font-family: cairo, sans-serif;
    font-style: normal;
    font-weight: 200;
    padding-top: 16px;
  }
  .logo {
    text-align: center;
    max-width: 100%;
    padding-top: 2px;
  }
}

.vidlinks.responsive {
  position: relative;
}

.vidlinks.responsive a.icon {
  position: absolute;
  right: 0;
  top: 0;
}

.vidlinks.responsive a {
  float: none;
  display: block;
  text-align: left;
}

.vidlinks .responsive .dropdown {
  float: none;
}

.vidlinks .responsive .dropdown-content {
  position: relative;
}

.vidlinks .responsive .dropdown .dropbtn {
  display: block;
  width: 100%;
  text-align: left;
}


/* Style the form */

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}


/* Style the input fields */

.input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}


/* Mark input boxes that gets an error on validation: */

.input.invalid {
  background-color: #ffdddd;
}


/* Hide all steps by default: */

.tab {
  display: none;
}


/* Make circles that indicate the steps of the form: */

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}


/* Mark the active step: */

.step.active {
  opacity: 1;
}


/* Mark the steps that are finished and valid: */

.step.finish {
  background-color: #4CAF50;
}

```
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>

<body>
  <div class='content'>
    <div class='vidhead'>
      <div class='logo'>
        <p>
          <img src='Evolvelogo.png' style='width:24%; height: 30%;'>
        </p>
      </div>

      <div class='vidlinks' id='links'>
        <a href='../index.html#about' style='text-decoration:none; font-weight:200px; ' class='inactive'>ABOUT</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href='../index.html#team' style='text-decoration:none; ' class='inactive'>TEAM</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href='../index.html#contact-form-section' style='text-decoration:none; ' class='inactive'>CONTACT</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href='tournament.php' style='text-decoration:none; ' class='active'>TOURNAMENT</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href='privacy.php' style='text-decoration:none; ' class='active'>PRIVACY POLICY</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href='ecademy.php' style='text-decoration:none; ' class='active'>ECADEMY</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(0);" class="icon" onclick="condenseLinks()">
          <i class="fa fa-bars"></i>
        </a>
      </div>

      <div class='vidbody' style="text-align:center; width:100%;">
        <h2 style="color:white; background:black; color:#8449ff; font-family:cairo, sans-serif; font-style:normal; font-weight:200px;">
          <img src="eCademy_LogoPNG.png" alt="ecademy" style="width:400px; height:100px;">
        </h2>
      </div>

      <div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff; 
        font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
        <div class="container" style=" display:inline-block; width:40%; height:100%;">
          <br><br><br>
          <div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
            <img src="evolvephoto1.png" style="width:256px; height:266px;">
          </div>
          <div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
            <br><br><br> NAME: Kevin Kapoor <br> IGN/Handle: Irøh (or sometimes ZukosUncle) <br> Twitch: @irohsTeaShop <br>
          </div>
          <p>
            With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes
            for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
          </p>
        </div>
      </div>
    </div>
    <div class="teamBios" style="color:black; background:black; width:100%; height:450px; color: #8449ff; 
        font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
      <div class="container" style=" display:inline-block; width:40%; height:100%;">
        <br><br><br>
        <div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
          <img src="Desmond Wong2.jpg" style="width:256px; height:266px;">
        </div>
        <div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
          <br><br><br> NAME: Desmond Wong <br> IGN/Handle: Overlorred <br> Twitch: @overlorredtft <br>
        </div>
        <p>
          A versatile coach in every sense of the word, he brings four years of experience competing at the top level of the collegiate esports scene as both a player and as a coach. Combined with his six years as a high elo solo queue player, his coaching style
          brings together all the knowledge he has learned over the years from playing with and against the best. It is the perfect blend of his experiences from his time in the competitive scene and grinding the solo queue ladder. Whether you're completely
          new to the game or an aspiring pro, Desmond is ready to guide you every step of the way to help you reach your goals.
        </p>
      </div>
    </div>
    <div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff; 
        font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
      <div class="container" style=" display:inline-block; width:40%; height:100%;">
        <br><br><br>
        <div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
          <img src="Alex Gingrich2.jpg" style="width:256px; height:266px;">
        </div>
        <div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
          <br><br><br> Name: Alex Gingrich<br> IGN/Handle: Chunder<br> Twitter: @alexgingrich<br>
        </div>
        <p>
          Alex has built his entire professional life around applying traditional sports and business strategy into esports. Although Alex has been playing competitive games since the days of Halo 3 he got his first taste in esports player improvement at grad school
          when he managed the inaugural Varsity Overwatch teams at The University of Akron. Since then Alex has gone on to work for ReKTGlobal, owners of Team Rogue and The London Royal Ravens, where he gains first hand knowledge of professional esports
          and the mentalities of what makes a great player.
        </p>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

Answer 1

我认为您将图像和名称放在 e 父 div 下并使显示灵活。同时删除不需要的
标签。希望它有效

<div class="container">
    <div class="bioPhotos">
        <img src="evolvephoto1.png"> 
        <div class="about-details">
             NAME: Kevin Kapoor <br>
             IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
             Twitch: @irohsTeaShop <br>
        </div>
    </div>
    <p>
        With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
    </p>
</div>

.container{
    display: flex;
    width: 50%;
}
.bioPhotos{
    display: flex;
    flex-direction: column;
}
.about-details{
    display: flex;
}
p{
    display: flex;
    align-items: center;
    justify-content: center;
}