我的div是否将其自身重新定位在其父div中是否有原因？

Question

我正在尝试使用Css网格创建页脚，直到到达断点为止，它都可以正常工作。在中断点，子div从最后一个孩子移到第一个孩子。

我尝试删除浮点，并检查了宽度等，但看不到任何会破坏布局的东西。如果在断点内重新加载浏览器，则它将加载到正确的位置，直到您调整浏览器的大小为止。

<footer class="main-footer">


  <div id="coin-container"></div>

  {% assign linklistCount = 0 %}
  {% for i in (1..3) %}
    {% capture linklistOption %}footer-linklist-{{ i }}{% endcapture %}
    {% capture linklist %}{{ settings[linklistOption] }}{% endcapture %}

    {% if linklist.size > 0 %}
      {% assign linklistCount = linklistCount | plus: 1 %}
    {% endif %}
  {% endfor %}

  {% if settings.mailing-list or linklistCount > 0 or settings.footer-text-content != blank or settings.footer-social-links %}
    <div class="upper-footer">

      {% comment %} <a href="#" title="Scroll to Top" class="scrollToTop">{{ 'ico-arrow-up.png' | asset_url | img_tag }}</a> {% endcomment %}


      {% comment %} {% if settings.footer-text-content != blank %}
        <div class="footer-blurb">
          {% if settings.footer-headers %}
            <h4 class="section-title">{{ settings.footer-text-title }}</h4>
          {% endif %}
          <div class="rte">{{ settings.footer-text-content }}</div>
        </div>
      {% endif %} {% endcomment %}
      {% if settings.footer-social-links %}
        {% for i in (1..2) %}

          {% capture linklistOption %}footer-linklist-{{ i }}{% endcapture %}
          {% capture linklist %}{{ settings[linklistOption] }}{% endcapture %}

          {% if linklists[linklist].links.size > 0 %}
            <div class="footer-linklist">
              {% if settings.footer-headers %}
                <h4 class="section-title">{{settings.footer-text-title}}</h4>
              {% endif %}

              <ul>
                {% for link in linklists[linklist].links %}
                  <li><a href="{{ link.url }}" {% if link.url contains 'http://' or link.url contains 'https://' %}target="_blank"{% endif %}>{{ link.title }}</a></li><br/>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

        {% endfor %}



      {% else %}
        {% for i in (1..3) %}

          {% capture linklistOption %}footer-linklist-{{ i }}{% endcapture %}
          {% capture linklist %}{{ settings[linklistOption] }}{% endcapture %}

          {% if linklists[linklist].links.size > 0 %}
            <div class="footer-linklist">
              {% if settings.footer-headers %}
                <h4 class="section-title">{{ linklists[linklist].title }}</h4>
              {% endif %}

              <ul>
                {% for link in linklists[linklist].links %}
                  <li><a class="{% include 'social-check' %}" href="{{ link.url }}" {% if link.url contains 'http://' or link.url contains 'https://' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

        {% endfor %}
      {% endif %}

      <div class="footer-blurb">
      {% if settings.footer-contact-content != blank %}
          {% if settings.footer-headers %}
            <h4 class="section-title">{{settings.footer-contact-title}}</h4>
          {% endif %}
          <div class="rte">
            {{ settings.footer-address-content | newline_to_br}} 
            <br/>
            <br/>
            {{ settings.footer-contact-content | newline_to_br}} 
          </div>
      {% endif %}
      </div>

      <span class="spacer"> </span>

        {% if settings.mailing-list %}
        <div class="mailing-list">

          {% if settings.footer-headers %}
            <h4 class="section-title">{{ settings.mailing-list-title }}</h4>
          {% endif %}

          {% if settings.mailing-list-platform == 'mailchimp' or settings.mailing-list-platform == 'campaign-monitor' %}
            <form action="{{ settings.mailing-list-action-url }}" method="post" name="{% if settings.mailing-list-platform == 'mailchimp' %}mc-embedded-subscribe-form{% endif %}" target="_blank">

              {% if settings.mailing-list-platform == 'mailchimp' %}
                <input class="mailing-list-email" name="EMAIL" type="email" placeholder="Your email address" value="">
              {% endif %}

              {% if settings.mailing-list-platform == 'campaign-monitor' %}
                <input id="fieldEmail" class="mailing-list-email" name="{{ settings.campaign-monitor-name }}" type="email" placeholder="{{ 'general.general.email_placeholder' | t }}" required />
              {% endif %}

              <div class="mailing-list-submit"> 
                <input class="submit" name="subscribe" type="submit" value="{{ settings.mailing-list-button-text}}">
              </div> 

            </form>
          {% else %}

            {% form 'customer' %}
              <input class="mailing-list-email" name="contact[email]" type="email" placeholder="your@email.com" value=""/>
              <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
              <div class="mailing-list-submit"> 
                <input class="submit" name="subscribe" type="submit" value="{{ 'layout.footer.newsletter_subscribe' | t }}"/>
              </div> 
            {% endform %}

            <div class="modal-wrapper modal-mailing-list"> 
              <div class="modal"> 
                <h3 class="section-title">{{ settings.mailing-list-modal-title }}</h3>
                <p>{{ settings.mailing-list-modal-description }}</p>
                <span class='button dismiss'>{{ settings.mailing-list-modal-button-text }}</span>
              </div>
            </div>
          {% endif %}
          {% endif %}
      {% if settings.footer-social-links %}
        {% include 'social-links' %}
      {% endif %}
      </div>

  {% endif %}


  {% if shop.enabled_payment_types.size > 0 and settings.footer-payment-options %}
    <div class="sub-footer">
      <ul class="payment-options">
        {% for type in shop.enabled_payment_types %}
          <li class="payment-icon {{ type | replace: '_','-' }}"></li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
</footer>

.main-footer {
  max-width: 100vw;
  padding: 20px 10px 0;
  font-size: 0;
  clear:both;
  background: #F6F6F6;
  z-index: 9999;

  .scrollToTop{
    font-size: 12px; 
    float:right;
    display:none;

    img{     
      width: 25px;
      height: auto;
      position: fixed;
      bottom: 100px;
      right: 20px; 
    }
  }

  @include breakpoint(m) {
    padding: 0;
  }

  .section-title {
    margin: 0 0 20px;
    font-size: 16px;
    text-transform: uppercase;


    {% if settings.heading-font-small-caps %}
      font-size: 14px;
    {% endif %}
  }

  a {
    color: $heading-color;
  }
}


.masonry-features-wrapper + .main-footer {
  border: 0;

  .upper-footer {
    border: 0;
  }
}

.upper-footer {
  padding: 40px 100px 50px;
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  @include breakpoint(l) {
    border: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }


  @include breakpoint(m) {
    border: 0;
    padding: 40px 30px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  @include breakpoint(s) {
    & > *:last-child {
      margin-bottom: 0;
    }
    grid-template-columns: 1fr;
  }

  a:hover {
    color: $body-color;
  }
}



.footer-linklist {
  display: inline-block;
  vertical-align: top;
  padding-right: 30px;
  width: auto;
  font-size: $base-font-size;

  ul li{ display:inline-block; }

  &.social-links{
    float:right;
    padding-right:0;

    ul{
      li{ display:inline-block; margin:0 0 0 5px;

    a{ width: 20px; height: 20px; overflow:hidden;display:inline-block; }
    }
    }
  }

  @include breakpoint(m) {

  }

  @include breakpoint(s) {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    padding: 0;
  }


  ul {
    margin: 0;
    padding: 0;
  }



.footer-blurb {
  display: inline-block;
  vertical-align: top;
  font-size: $base-font-size;
  color: $heading-color;

  @include breakpoint(m) {
  }

  @include breakpoint(s) {
    /* width: 100%; */
    text-align: center;
    margin-bottom: 40px;
    padding: 0;
  }

  a {
    color: $accent-color;

    &:hover {
      @include textHover($accent-color);
    }
  }
}

.spacer {
  @include breakpoint(l) {
    display:none;
  }

  @include breakpoint(m) {
    display:none;
  }

  @include breakpoint(s) {
    display:none;
  }

}

.mail-social-div {
  display: flex;
  flex-direction: column;
}

.mailing-list {
  display: inline-block;
  font-size: $base-font-size;
  float:right;

  @include breakpoint(m) {
    padding-right: 20px;
    float:right;
  }

  @include breakpoint(s) {
    width: 100%;
    margin: 0px;
    padding: 0;
    float:right;
    .section-title {
      text-align: center;
    }
  }


  form {
    position: relative;
    font-size: 0;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
  }

  .section-title {
    text-transform: uppercase;
    letter-spacing: 0;
  }
}

input.mailing-list-email {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  height: 41px;
  margin: 5px 0;
  padding: 9px 12px 9px 12px;
  font-size: $base-font-size;
  outline: 0;
  background: transparent;
  margin-bottom: 20px;
  flex: 2;
}

.mailing-list-submit {
  position: relative;
  top: 0;
  right: 0;
  flex: 1;



  .submit {
    margin: 5px 0;
    padding: 1px 10px 0;
    font-size: 13px;
    line-height: 38px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: transparent;
    color: #000;
    border: 1px solid #000;

    {% if settings.button-font-small-caps %}
      font-size: 12px;
    {% endif %}
  }
}
```[![Layout after resize glitch][1]][1]


[![Expected Layout][2]][2]


  [1]: https://i.stack.imgur.com/zVayM.png
  [2]: https://i.stack.imgur.com/ivxRP.png