Question

我正在尝试构建一个包含10个问题的简单调查，这些问题存储在我的数据库中，循环播放，并且10个问题会动态添加到页面中。基本上，我希望一次只有一个问题在页面上，但页面可以滚动查看其他问题。

例如，问题1将显示在页面中间，用户键入他们的答案并单击下一步，页面滚动到下一个问题。如果用户向上滚动，则向上滚动页面，向下滚动向下滚动。为了跳到下一个问题，我计划让每个问题都有一个id，而下一个按钮只是有一个id的链接。

我在页面上填充问题的HTML如下所示：

<div class="container">
    <div class="row wrapper">
        <div class="question">
            <p>What is your name?</p>
        </div>

        <div class="description">
            <p>Used for...</p>
        </div> 

        <div class="answer">
            <input type="text" placeholder="">
        </div>
    </div>
</div>

我上面的CSS看起来像这样：

.question {
    color: #232A33;
    text-align: left;
    font-size: 2em;
}

.description {
    color: #FFCD3D;
    text-align: left;
    font-size: 1.25em;
}

.answer {
    color: #232A33;
    text-align: left;
    font-size: 1.25em;
}

我设法使用以下代码将问题集中在页面上：

.wrapper {
    width: 500px;
    height: 150px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

这适用于一个问题，但如果有多个问题，它们都会相互重叠，因为这个位置是绝对的。

有关如何为页面实现此设计的任何提示？

提前致谢！

Answer 1

你非常接近。这可以通过添加更多css（稍微调整行类）来完成。

如果添加以下内容：

**relative**

并将您的包装器调整为.wrapper { width: 500px; height: auto; position: relative; }定位，您应该会看到一个好结果

.question {
  color: #232A33;
  text-align: left;
  font-size: 2em;
}

.description {
  color: #FFCD3D;
  text-align: left;
  font-size: 1.25em;
}

.answer {
  color: #232A33;
  text-align: left;
  font-size: 1.25em;
}

.row {
  width: 100%;
  margin: 15% auto;
  height: 100vh!important;
}

.wrapper {
  width: 500px;
  height: auto;
  position: relative;
}

请参阅代码段或fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row wrapper">
    <div class="question">
      <p>What is your name?</p>
    </div>

    <div class="description">
      <p>Used for...</p>
    </div>

    <div class="answer">
      <input type="text" placeholder="">
    </div>
  </div>
</div>
<div class="container">
  <div class="row wrapper">
    <div class="question">
      <p>What is your name?</p>
    </div>

    <div class="description">
      <p>Used for...</p>
    </div>

    <div class="answer">
      <input type="text" placeholder="">
    </div>
  </div>
</div>
<div class="container">
  <div class="row wrapper">
    <div class="question">
      <p>What is your name?</p>
    </div>

    <div class="description">
      <p>Used for...</p>
    </div>

    <div class="answer">
      <input type="text" placeholder="">
    </div>
  </div>
</div>
<div class="container">
  <div class="row wrapper">
    <div class="question">
      <p>What is your name?</p>
    </div>

    <div class="description">
      <p>Used for...</p>
    </div>

    <div class="answer">
      <input type="text" placeholder="">
    </div>
  </div>
</div>

{{1}}

使用CSS和Bootstrap垂直对齐div？

1 个答案: