问div的内容移动到其他div以下。
EN

Stack Overflow用户

提问于 2015-01-20 16:36:20

回答 1查看 51关注 0票数 0

同样，我在调整我的divs方面也有问题。divs对齐很好，但是如果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>

结果：

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

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-20 16:39:48

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

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

<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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28050552

复制

相似问题

问div的内容移动到其他div以下。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div的内容移动到其他div以下。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div的内容移动到其他div以下。
EN