html - 如何将这个 div 放在另一个旁边？

问题描述

我已经开始学习 Web 开发，对于我的生活，我无法弄清楚如何将我的 div 放置在#Infodiv 的右侧#inputForm。这是一个很好的时间，大多数地方都说如果两个元素都使用“display:inline-block”它应该可以工作。我肯定错过了一些东西。任何帮助是极大的赞赏！

header {
  background: black;
  color: rgb(0, 183, 255);
  font-size: 24px;
  padding: 10px 10px 1px 10px;
}

h1 {
  margin: 0px;
  font-size: 28px;
  border-bottom: 2px solid currentColor;
  /* line at top. TODO: make it turn into wave (D3 library maybe) */
}

h2 {
  margin: 0px 0px 0px 30px;
  font-size: 14px;
}

body {
  margin: 0%;
  background: rgb(58, 58, 58);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: white;
}

nav {
  background: black;
  display: flex;
  padding: 0px;
  float: right;
  margin-top: -50px;
  /* Because of float */
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  font-size: 0.8em;
  display: inline-block;
  /* Horizontal menu */
}


/* All input */

#inputForm {
  display: inline-block;
  background-color: darkgoldenrod;
}

#inputForm * {
  /* targets everything inside */
  margin: 5px;
}

#inputForm input {
  width: 42px;
  background-color: darkred;
}

.DataInput {
  width: 4%;
  background-color: gray;
}

.waveform {
  float: left;
  background-color: darkorchid;
}

.waveform label {
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

#dataContainer {
  background-color: black;
}

#waveformContainer {
  display: inline-block;
  background: darkgreen;
}

.Info {
  display: inline-block;
  background-color: darkmagenta;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <title>Additive Generator</title>
</head>

<body>
  <header>
    <h1> Generate a waveform</h1>
    <h3> an <em>audio-visual</em> experience </h2>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Create</li>
        </ul>
      </nav>
  </header>

  <form id="inputForm">
    <div id="dataContainer">

      <div>
        <label>Harmonics</label>
        <input class="DataInput" type="number" value="10">
      </div>

      <div>
        <label>Amplitude</label>
        <input class="DataInput" type="number" value="10">
      </div>

      <div>
        <label>Frequency</label>
        <input class="DataInput" type="number" value="10">
      </div>

    </div>

    <div id="waveformContainer">
      <div class="waveform">
        <label for "Square">Square</label>
        <!-- Insert Image-->
        <input name="waveform" type="radio" value="1">
      </div>

      <div class="waveform">
        <label for "Saw">Saw</label>
        <input name="waveform" type="radio" value="2">
      </div>

      <div class="waveform">
        <label for "Mix">Mix</label>
        <input name="waveform" type="radio" value="3">
      </div>
    </div>
  </form>

  <div class="Info">
    The new section The sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new section
  </div>
</body>

</html>

https://jsfiddle.net/gr7kx3th/

标签： htmlcss

html - 如何将这个 div 放在另一个旁边？

问题描述

解决方案

推荐阅读