当屏幕从全屏过渡到小屏时，如何修复内容 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 完全按照你说的做，它 漂浮在右边 ，这意味着它将自己定位在 .wrap 右侧，如果 x 轴上没有足够的 space，则在其他浮动内容下方（在这种情况下是您的第一个问题）。

我可以建议：在所有问题上使用 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;
    }
}

更改以下代码代替最小宽度：你必须写最大宽度和浮动：左代码如上所示

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

How to fix css/html for content when screen in transition from full to smaller screen?

html

css

css-float