CSS

Question

我正在使用 zurb-foundation 作为 css 框架，我的布局有一个 header，其中有一个标题栏和两个 div。 Div左边大屏占4列，右边占8列。右边的图片占据了整个 div 的宽度。在小屏幕上，我希望左侧 div 位于右侧 div 下方，但问题是在小屏幕上左侧 div 消失在右侧 div 下方。这是 html:

<div class="header row row-wrapper">
    <div class="frontpage-header-content">
      <?php while ( have_posts() ) : the_post(); ?>
      <div class="large-4 medium-12 columns lcol">
        <h3><?php the_title(); ?></h3>
        <div class="border"></div>
      </div>
      <div class="large-8 medium-12 columns rcol">
        <div class="hero-image-wrapper">
          <?php the_post_thumbnail(); ?>
          <div class="overlay"></div>
        </div>
      </div>
    </div>

    <div class="header-title-bar">
      <div class="row">
        <div class="large-12 columns">
          <div class="title-bar">
            <div class="title-bar-left">
              <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
              <span class="title-bar-title">Meny</span>
            </div>
            <div class="title-bar-right">
              <span class="title-bar-title">Støtteforeningen for Kreftrammede</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.header -->

这是 css:

.header-title-bar {
    position: absolute;
    top: 0;
    width: 100%;
}
.header .columns {
    padding-right: 0;
}

.hero-image-wrapper .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: rgba(255, 255, 255, .3);
}

@include breakpoint(medium down) {
    .row-wrapper{
       width :100%;
       display: flex;
       flex-flow: row wrap;
    }
    .lcol{
       float:left;
       order: 2;
    }
    .rcol{
       float:right;
       order: 1;
    }
}

这是fiddle。我不确定 css 的哪一部分毁了我的工作，因为它只有在它自己的时候才能工作，没有来自其他脚本的所有其他 css，也就是说在 fiddle.

Answer 1

问题是您将列包装到：

<div class="frontpage-header-content">

如果您想避免像这样不可预测的行为，请尝试坚持正确的结构和列嵌套：

<div class="row">
    <div class="large-12 columns">
    </div>
</div>

当您在行和列之间插入内容或根本不将列换行时，您就是在破坏网格。

https://jsfiddle.net/wqupzmLw/

CSS - 将 div 拉到另一个在小屏幕上不起作用的下方

CSS - pulling div below the other one not working on small screens

html

zurb-foundation