使用 Window.resize 和媒体查询来移动 div 元素

Question

演示图像 我正在使用窗口调整大小函数来检查页面的宽度，如果它低于 891，我触发函数将我的 #formWrapperdiv 移动到页面上的 #formbottom，媒体查询设置为最大宽度 891 以将 formWrapper 更改为向左浮动，最大宽度为 100%。 一切几乎正常工作，但有轻微的跳跃，当浏览器达到891px时，媒体查询和JS功能似乎略有偏差？

您可以通过调整浏览器窗口的大小来查看这一点。 任何见解将不胜感激。

  $(document).ready(function() {
    $(window).resize(function() {
      if ($(window).width() < 891) {
        $("#formWrapper").detach().appendTo('#formbottom');
      } else {
        if ($(window).width() > 891) {
          $("#formWrapper").detach().appendTo('#formtop');
        }
      }
    });
  }); 

@charset "utf-8";
/* CSS Document */
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  background-color: #F2F2F2;
}
ol,
ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* LANDING PAGE */
html {
  position: relative;
  min-height: 100%;
}
body {
  font-family: proxima-nova, sans-serif;
  margin: 0 0 100px;
  /* bottom = footer height */
}
#container {
  width: 100%;
  margin: auto;
}
.content-wrapper {
  max-width: 1040px;
  margin: auto;
  overflow: hidden;
  padding-top: 38px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}
/* landing page masthead */
#mastheadBar {
  max-width: 100%;
  background-color: #FDA929;
}
#mastheadImage {
  max-width: 1520px;
  background-image: url(https://pages.infor.com/rs/227-UHD-858/images/hero.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: scroll;
  margin: auto;
}
.logoWrapper {
  max-width: 310px;
  margin-bottom: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 23px;
  color: #FFF;
  vertical-align: middle;
  display: table;
}
.LogoWrapperText {
  display: table-cell;
  vertical-align: middle;
  padding-left: 21px;
}
h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 54px;
  color: #FFF;
  max-width: 50.2128%;
  margin-top: -14px;
  margin-bottom: -8px;
}
/* landing page main content */
#mainContent {
  background-color: #fff;
  overflow: hidden;
}
#mainContent p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #737373;
  padding-top: 12px;
}
#mainContent li {
  color: #737373;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  list-style-position: outside;
  margin: 0 0 8px 10px;
}
#mainContent ul {
  list-style-position: inside;
  list-style-type: disc;
  padding-top: 32px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}
#mainContentLeft {
  float: left;
  width: 57.4468085106383%;
  margin-top: -5px;
}
#mainContentLeftWrap {
  margin-bottom: 11px;
}
#mainContentRight {
  float: right;
  width: 31.91489361702128%;
  padding-top: 9px;
}
#mainContentRight img {
  max-width: 100%;
  height: auto;
}
/* footer */
#footer {
  background-color: #F2F2F2;
  font-size: 12px;
  font-weight: 400;
  color: #737373;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
}
#footerWrapper {
  max-width: 1040px;
  margin: auto;
  padding: 22px 50px 22px 50px;
  overflow: hidden;
}
/* form page */
#formWrapper {
  background-color: #fff;
  box-shadow: 0 0 10px #888;
  box-sizing: border-box;
  float: right;
  margin-top: 120px;
  padding: 20px;
  width: 36.1702%;
}
#formWrapper img {
  max-width: 100%;
  height: auto;
}
.content-wrapperForm {
  max-width: 1040px;
  margin: auto;
  padding-top: 38px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
  position: relative;
}
#mainContentWrap {
  background-color: #fff;
}
#mainContentWrap p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #737373;
  padding-top: 12px;
}
#mainContentWrap li {
  color: #737373;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  list-style-position: outside;
  margin: 0 0 8px 10px;
}
#mainContentWrap ul {
  list-style-position: inside;
  list-style-type: disc;
  padding-top: 32px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}
.formIntro {
  float: left;
  width: 67%;
}
.formIntroCta {
  color: #595959;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 17px;
}
.formIntroReq {
  color: #737373;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 34px;
}
.formIntroImg {
  float: right;
  width: 70px;
}
.formIntroImg img {
  max-width: 100%;
}
/* form */
/* form wrapper */
.mktoForm {
  text-align: left;
  width: 100% !important;
}
/* remove form wrapper padding mobile */
.mktoMobileShow .mktoForm,
.mktoForm * {
  padding: 0 !important;
}
/* remove form wrapper padding */
.mktoForm,
.mktoForm * {
  padding: 0 !important;
}
/* form column holding field and label */
.mktoForm .mktoFormCol {
  float: left;
  min-height: 2em;
  position: relative;
  width: 100% !important;
}
/* form column wrapper */
.mktoForm .mktoFieldWrap {
  float: none !important;
  width: 100% !important;
  margin-bottom: 15px !important;
}
/* form column left padding - set to zero to make columns flush to left */
.mktoForm .mktoOffset {
  float: left;
  height: 1.2em;
  width: 0 !important;
}
/* Non-required Label */
.mktoForm .mktoLabel {
  color: #999999;
  font-size: 14px;
  font-weight: 300 !important;
  line-height: 16px;
  margin-bottom: 7px !important;
  width: auto !important;
}
/* Required field label */
.mktoForm .mktoRequiredField label.mktoLabel {
  color: #999999;
  font-size: 14px;
  font-weight: 300 !important;
  line-height: 16px;
  margin-bottom: 7px;
}
/* Asterix appearance */
.mktoForm .mktoAsterix {
  color: #bf0000;
  float: right;
  padding-left: 5px;
}
/* Asterix position */
.mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
  float: right !important;
  padding-left: 0;
  padding-right: 0;
}
/* Field formating */
.mktoForm input[type="text"],
.mktoForm input[type="url"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm input[type="number"],
.mktoForm input[type="date"],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
  border: 1px solid #d9d9d9 !important;
  padding: 10px 12px !important;
  width: 100% !important;
  height: auto !important;
}
/* Button row container */
.mktoButtonRow {
  display: inline-block;
  position: relative;
  width: 100%;
}
/* Button style */
.mktoForm button.mktoButton {
  background-color: #fc6621;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  line-height: 19px;
  padding: 12px !important;
  width: 100%;
  margin-top: 14px;
  margin-right: 0;
  margin-bottom: -6px;
  margin-left: 0;
}
/* Reset for form items to be flush left */
.mktoForm div,
.mktoForm span,
.mktoForm label,
.mktoForm p {
  margin: 0 !important;
  text-align: left;
}
/* Field text formating */
.mktoForm .mktoField {
  color: #666666;
  float: left;
  font-size: 16px !important;
  line-height: 19px;
}
/* Comment field formating */
.mktoForm.mktoLayoutAbove textarea.mktoField {
  float: left;
  margin-bottom: 7px;
}
/* Float check and radio button right */
.mktoRadioList {
  width: auto !important;
  float: left !important;
  clear: none !important;
}
/* Remove left padding from Radio and Checkbox */
.mktoForm .mktoRadioList,
.mktoForm .mktoCheckboxList {
  padding: 0 !important;
}
.mktoForm select.mktoField::-ms-expand {
  display: none;
}
.mktoForm select.mktoField {
  background: url(http://na-ab22.marketo.com/rs/625-VIS-608/images/input_icon_selector.png) no-repeat right;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-position-x: 97%;
}
/* Checkbox formating */
.mktoCheckboxList input {
  opacity: 0;
  position: absolute;
}
.mktoCheckboxList input,
.mktoCheckboxList label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.mktoCheckboxList label {
  position: relative;
}
/* Edit the properties below to change the colors of the un-checked checkbox */
.mktoCheckboxList input+label:before {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #d9d9d9;
  content: "";
  display: inline-block;
  height: 25px;
  margin-right: 10px;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
}
/* Edit the properties below to change the colors of the checked checkbox */
.mktoCheckboxList input:checked+label:before {
  content: "2713";
  background: #56CFD2;
  color: #fff;
  border-color: #3eb9bc;
}
body .mktoForm .mktoCheckboxList>label {
  margin-left: 0;
}
/* Checkbox and Radio formating */
.mktoRadioList input {
  opacity: 0;
  position: absolute;
}
.mktoRadioList input,
.mktoRadioList label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.mktoRadioList label {
  position: relative;
}
/* Edit the properties below to change the colors of the un-checked radio button */
.mktoRadioList input+label:before {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #ddd;
  content: "";
  display: inline-block;
  height: 25px;
  line-height: 15px;
  margin-right: 10px;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  ;
}
.mktoRadioList input+label:before {
  border-radius: 50%;
}
/* Edit the properties below to change the colors of the checked radio button */
.mktoRadioList input:checked+label:before {
  content: "2713";
  color: #bbb;
}
.mktoRadioList input:focus+label {
  outline: 1px solid #ddd;
  /* focus style */
}
/* Radio button label padding */
body .mktoForm .mktoRadioList>label {
  float: left;
  margin-left: 0;
  padding-right: 10px !important;
}
/* Radio button wrapper padding */
.mktoForm.mktoLayoutAbove .mktoRadioList {
  margin-top: -5px !important;
  padding-left: 10px !important;
}
/* Error Message */
.mktoForm .mktoError {
  color: #666666;
  position: absolute;
  z-index: 99;
}
/* Error Message arrow */
.mktoForm .mktoError .mktoErrorArrow {
  background-color: #666666 !important;
  border-top-color: #666666 !important;
  border-right-color: #666666 !important;
  border-bottom-color: #666666 !important;
  border-left-color: #666666 !important;
  margin-top: 5px !important;
}
/* Error Message box */
.mktoForm .mktoError .mktoErrorMsg {
  background-color: #666666 !important;
  background-image: none !important;
  border: 1px solid #666666 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  padding: 5px !important;
  text-shadow: none !important;
  margin-top: 7px !important;
}
/*MEDIA QUERIES*/
@media all and (max-width:891px) {
  h1 {
    font-size: 45px;
    font-weight: 700;
    line-height: 49px;
    color: #FFF;
    max-width: 745px;
    margin-top: -14px;
    margin-bottom: 23px;
  }
  .content-wrapperForm {
    overflow: hidden;
  }
  #mainContentLeft {
    float: left;
    width: 100%;
    margin-top: 0;
  }
  #formWrapper {
    float: left;
    width: 100%;
    padding: 24px;
    margin-top: 10px;
    box-sizing: border-box;
    background-color: #FFF;
  }
}
@media all and (max-width:320px) {
  #mastheadImage {
    background-image: none;
  }
  .logoWrapper {
    margin-bottom: 30px;
  }
  h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    margin-top: -11px;
    margin-bottom: 23px;
  }
  #footerWrapper {
    max-width: 1040px;
    margin: auto;
    padding: 22px 30px 22px 30px;
    overflow: hidden;
  }
}

<!doctype html>
<html>
<head>
  <!-- Other Meta Tags -->
  <meta charset="utf-8">
  <link href="LP-Standard-Form-2017-2.css" rel="stylesheet" type="text/css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>${page-title}</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <!-- container -->
  <div id="container">
    <!-- masthead -->
    <div id="mastheadBar">
      <div id="mastheadImage">
        <div class="content-wrapperForm">
          <div id="formtop">
            <div id="formWrapper">
              <div class="formIntro">
                <div class="formIntroCta">Please fill in the form below.</div>
                <div class="formIntroReq">Fields marked with a <span style="color: #fc6621">*</span> are required.</div>
              </div>
              <div class="formIntroImg"></div>
              <div class="mktoForm" id="DKform1" mktoName="Form"></div>
            </div>
          </div>
          <div class="logoWrapper">
            <div class="LogoWrapperText">${logo-text}</div>
          </div>
          <h1>${page-title}</h1>
        </div>
      </div>
    </div>
    <!--/masthead -->
    <!--main content-->
    <div id="mainContentWrap">
      <div class="content-wrapperForm">
        <div id="mainContentLeft">
          <div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body Text">
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
            <p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
              erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
            <p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
            <ul>
              <li>Integer ornare velit metus, sit amet tincidunt neque</li>
              <li>luctus vitae. Suspendisse vulputate cursus</li>
              <li>scelerisque. Sed ac lectus eget nisi facilisis</li>
            </ul>
          </div>
        </div>
        <div id="formbottom"></div>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
  <!--/main content-->
  <!--footer-->
  <div id="footer">
    <div id="footerWrapper">© Copyright
      <script type="text/javascript">
        document.write(new Date().getFullYear());
      </script> Infor. All rights reserved.</div>
  </div>
  <!--/footer-->
  </div>
  <!--/container -->

</body>
</html>

Answer 1

我没有更改代码，只是向 #fromWrapper 添加了过渡属性。

请找到答案。更新的代码

#formWrapper {
  float: left;
  width: 100%;
  padding: 24px;
  margin-top: 10px;
  box-sizing: border-box;
  background: #FFF;
  transition: all 1s linear;
}