当屏幕从全屏过渡到小屏时，如何修复内容的 css/html？

Question

在调整页面大小时，我的 css 和 HTML 存在问题。

现在它在全屏（笔记本电脑或全屏手机）时可以完美运行。会发生什么情况是这两个问题在全屏时并排出现，而在移动设备中则是一个接一个。

我唯一的问题是在阶段之间。如果您查看提供的图像，您会发现它看起来不正确。我希望第二个问题在我从全屏过渡到移动屏幕时排在第一个问题之后，就像我说的那样，直到屏幕的宽度更小才会发生这种情况。

我的问题只是如何纠正这个问题？

.quesalignleft {
  float: left;
}

.quesalignright {
  float: right;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

Answer 1

这里的问题是你对float的使用，你的.quesalignright完全按照你说的做，它在右边浮动，这意味着它把自己定位在@ 987654323@ 右侧，如果 x 轴上没有足够的空间，则进入其他浮动内容（在这种情况下是您的第一个问题）。

我的建议是：在所有问题上使用float: left，在大屏幕上使用max-width: 50%，这样如果您愿意，您的问题就会并排显示。

.quesalignleft {
  float: left;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
  
  .quesalignleft {
    max-width: 50%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignleft size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

Answer 2

使用float 和媒体查询（你的代码）

.quesalignleft {
  float: left;
}

.quesalignright {
  float: right;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (max-width: 767px) {
 .quesalignright {
  float: left;
}
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

将flex 与媒体查询一起使用

.quesalignleft {
  width: 100%;
}

.quesalignright {
  width: 100%;
}
.box {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
.box {
    display: block;
}
}
.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="box">
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div></div>
</section>

Answer 3

@media (max-width: 1024px) {
    .wrap,
    header nav,
    footer nav {
        width: 95%;
    }
    .quesalignright {
        float: left;
    }
}

更改以下代码 代替 min-width：你必须写 max-width 和浮动：左代码如上所示