Question

我再次对齐divs时遇到问题。 div是好的，但是如果div要对齐，我就无法得到内容。这是我的代码：

.maketable {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
  display: table;
  clear: both;
}
.makecell {
  display: table-cell;
}

<body>
  <div class="wrapper">
    <div class="maindiv">
      <div class="rightdiv">

        <h1>Välj utseende på framsidan</h1>
        <br />
        <div class="maketable">
          <div style="display: table-row;">

            <div class="makecell" id="cell1">
              <label for="bgchooser">Välj färg på framsidan:</label>
              <input class="color {valueElement:'bgValue'}" id="bgchooser" readonly style="border: 1px solid black">
              <input type="hidden" id="bgValue" value="ffffff" onchange="drawCanvas()">
              <br />
              <br />
              <label for="imageupload">Ladda upp egen bild:</label>
              <br />
              <br />
              <form action="wt_makefront.php?update=image" method="post" enctype="multipart/form-data">
                <input type="file" name="imageupload" id="imageupload">
                <input type="submit" id="submitupload" value="Ladda upp">
                <input type="reset" id="resetupload" value="Rensa" disabled>
              </form>
              <form action="wt_makefront.php?update=rmimage" method="post" enctype="multipart/form-data">
                <input type="submit" value="Ta bort bild">
              </form>
              Textfärg:
              <input class="color {valueElement:'txtValue'}" readonly style="border: 1px solid black">
              <input type="hidden" id="txtValue" value="000000" onchange="drawCanvas()">
              <br />
              <br />Om du vill ha en text på framsidan väljer du denna här.
              <br />Max tre rader, max 15 tecken per rad.
              <br />
              <br />
              <input type="text" id="txt-1" maxlength="15" onblur="drawCanvas()">
              <br>
              <input type="text" id="txt-2" maxlength="15" onblur="changeText()">
              <br>
              <input type="text" id="txt-3" maxlength="15" onblur="changeText()">
              <br>
            </div>


            <div class="makecell">
              <canvas id="imgCanvas" width="296" height="420" style="border:1px solid #000000;"></canvas>
            </div>

          </div>
        </div>
        <br />
        <div class="prevform">
          <form name="prevsubmitform" action="wt_choosetype.php" method="post">
            <input type="submit" value="Tillbaka">
          </form>
        </div>
        <div class="nextform">
          <form name="nextsubmitform" action="wt_part1start.php" method="post">
            <input type="submit" id="nextsubmit" value="Nästa">
            <input type="hidden" name="hidefrontcolor" value="">
            <input type="hidden" name="hidetextcolor" value="">
            <input type="hidden" name="hidefronttext1" value="">
            <input type="hidden" name="hidefronttext2" value="">
            <input type="hidden" name="hidefronttext3" value="">
          </form>
        </div>
        <div class="metertext">
          Sida 1/15
        </div>
        <div class="meter">
          <div class="meter-inside">
          </div>
        </div>
      </div>
      <script type="text/javascript">
        drawCanvas();
      </script>
    </div>
  </div>
</body>

结果：

enter image description here

如您所见，左侧div的内容位于右侧div下方。我可能错过了一些非常简单的东西，但无论如何我都找不到它。有人能帮助我吗？

Answer 1

将vertical-align: top应用于.makecell。

＆＃13;

.maketable {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
  display: table;
}
.makecell {
  display: table-cell;
  vertical-align: top;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="maindiv">
      <div class="rightdiv">

        <h1>Välj utseende på framsidan</h1>
        <br />
        <div class="maketable">
          <div style="display: table-row;">

            <div class="makecell" id="cell1">
              <label for="bgchooser">Välj färg på framsidan:</label>
              <input class="color {valueElement:'bgValue'}" id="bgchooser" readonly style="border: 1px solid black">
              <input type="hidden" id="bgValue" value="ffffff" onchange="drawCanvas()">
              <br />
              <br />
              <label for="imageupload">Ladda upp egen bild:</label>
              <br />
              <br />
              <form action="wt_makefront.php?update=image" method="post" enctype="multipart/form-data">
                <input type="file" name="imageupload" id="imageupload">
                <input type="submit" id="submitupload" value="Ladda upp">
                <input type="reset" id="resetupload" value="Rensa" disabled>
              </form>
              <form action="wt_makefront.php?update=rmimage" method="post" enctype="multipart/form-data">
                <input type="submit" value="Ta bort bild">
              </form>
              Textfärg:
              <input class="color {valueElement:'txtValue'}" readonly style="border: 1px solid black">
              <input type="hidden" id="txtValue" value="000000" onchange="drawCanvas()">
              <br />
              <br />Om du vill ha en text på framsidan väljer du denna här.
              <br />Max tre rader, max 15 tecken per rad.
              <br />
              <br />
              <input type="text" id="txt-1" maxlength="15" onblur="drawCanvas()">
              <br>
              <input type="text" id="txt-2" maxlength="15" onblur="changeText()">
              <br>
              <input type="text" id="txt-3" maxlength="15" onblur="changeText()">
              <br>
            </div>


            <div class="makecell">
              <canvas id="imgCanvas" width="296" height="420" style="border:1px solid #000000;"></canvas>
            </div>

          </div>
        </div>
        <br />
        <div class="prevform">
          <form name="prevsubmitform" action="wt_choosetype.php" method="post">
            <input type="submit" value="Tillbaka">
          </form>
        </div>
        <div class="nextform">
          <form name="nextsubmitform" action="wt_part1start.php" method="post">
            <input type="submit" id="nextsubmit" value="Nästa">
            <input type="hidden" name="hidefrontcolor" value="">
            <input type="hidden" name="hidetextcolor" value="">
            <input type="hidden" name="hidefronttext1" value="">
            <input type="hidden" name="hidefronttext2" value="">
            <input type="hidden" name="hidefronttext3" value="">
          </form>
        </div>
        <div class="metertext">
          Sida 1/15
        </div>
        <div class="meter">
          <div class="meter-inside">
          </div>
        </div>
      </div>
      <script type="text/javascript">
        drawCanvas();
      </script>
    </div>
  </div>
</body>

＆＃13;

div的内容移动到其他div之下

1 个答案: