Question

我使用zurb-foundation作为css框架，我有一个带有标题的布局，我有一个标题栏和两个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，那就是小提琴。

Answer 1

问题是你将列包装成：

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

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

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

当您在行和列之间插入内容时，或者只是永远不会将行包裹在行内时，您会破坏网格。

https://jsfiddle.net/wqupzmLw/

CSS - 将div拉到另一个不在小屏幕上的div

1 个答案: