CSS - 拉div下面另一个不工作的小屏幕 [英] CSS - pulling div below the other one not working on small screens

问题描述

我使用zurb-foundation作为CSS框架，我有一个标题的布局，其中有一个标题栏和两个div。左侧的Div在大屏幕上占据4列，右侧的占用8列。右边的一个图像占据了整个div的宽度。在小屏幕上，我想要左div到右下方，但问题是，在小屏幕左div消失在右侧div。这是html：

I am using zurb-foundation as css framework and I have a layout with a header where I have a title bar, and two divs. Div on left takes up 4 columns on big screens and the one on right takes 8 columns. The one on right has an image that takes up the whole div's width. On small screens I would like the left div to go below right div, but the problems is that on the small screens left div disappears under the right div. This is the 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;
    }
}

这是小提琴。我不知道css的哪一部分是毁了我的工作，因为它工作时，它只是在自己的，没有所有其他css来自其他脚本，这是在小提琴。

This is the fiddle. I am not sure which part of the css it is ruining it for me to work, since it works when it is just on it's own, without all the other css that comes from other scripts, that is in the fiddle.

推荐答案

问题是你将列包裹到：

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

如果你想避免不可预测的行为，试着坚持正确的结构和列的嵌套： / p>

If you want to avoid unpredictable behavior like this try to stick to proper structure and nesting of columns:

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

在行和列之间插入内容，或者根本不会在行中网格。

When you insert things between row and columns or simply never wrap columns inside of rows you're breaking the grid.

https://jsfiddle.net/wqupzmLw/

这篇关于CSS - 拉div下面另一个不工作的小屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！