Question

当您全屏显示并且屏幕宽度大于1340像素时，您将看到我当前的问题。带输入的div正在向下移动。为什么是这样？我试图让它与其他两个div保持一致。

＆＃13;

body {
  background: #212121;
}

.wrapper {
  padding: 20px;
  max-width: 1270px;
  margin: 150px auto;
}

@media (max-width: 1340px) {
  .wrapper {
    max-width: 400px;
  }
}

.content {
  height: 100%;
  width: 400px;
  margin: 10px;
  min-width: 300px;
  min-height: 500px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.insert {
  display: flex;
}

＆＃13;

<div class="wrapper">
  <div class="content" id="row1">
    <div class="wordInputContainer">
      <div class="inputBox">
        <input class="insert" type="text" placeholder="Enter Words"></input>
      </div>
    </div>
  </div>
  <div class="content" id="row2">
    <div class="wordOutputContainer">
      <div class="listBox">
        <!-- List Elements Go Here -->
        <!-- Words Output In Alphabetical Order [A - Z] -->
      </div>
    </div>
  </div>
  <div class="content" id="row3">
    <div class="wordStatisticContainer">
      <div class="wordCount"></div>
      <div class="commonLetter"></div>
      <div class="commonWord"></div>
      <div class="longestWord"></div>
      <div class="shortestWord"></div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

因为您的div是display: inline-block，所以它们将使用基线对齐作为其内联级元素，例如文本，图像和输入。默认设置为vertical-align: baseline。

所以你的输入元素与其他div的基线对齐。

只需将vertical-align: top添加到.content。

更多信息：Why is there a vertical scroll bar if parent and child have the same height?

为什么父容器中的内容会影响父母的职位？

1 个答案: