html - CSS - 使两个元素在小屏幕上重叠并在大屏幕上各自占据自己的宽度

Question

我想有两个 div 元素，一个带有一些文本和一个按钮，另一个带有图像，在一行中分开，其中带有文本的元素占 4 列，另一个带有图像的元素占 8 列列。但是在小屏幕上，带有图像的那个需要占据整个屏幕宽度，而带有文本和按钮的 div 需要覆盖它作为图像的叠加层。不确定实现此目的的最佳方法是什么，以及如何仅使用 css 和媒体查询来做到这一点？ 所以这将是大屏幕的 html:

        <div class="header row">
          <div class="large-12 columns frontpage-header-content">
            <div class="snirky-snark-box">
              <h4>Vi arbeider med å bygge kompetanse, spre kunnskap og positiv energi i kreftsaken</h4>
              <button type="button" class="button">Støtt kreftsaken</button>
            </div>
            <div class="frontpage-header-image">
               <img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png">
            </div>
          </div>

          <div class="header-title-bar">
            <div class="row">
              <div class="large-12 columns">
                <div class="title-bar">
                  <div class="title-bar-left">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/menu-icon.svg">
                    <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 {
  position: relative;
}

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

.frontpage-header-image {
  width: 67%;
}

.frontpage-header-content {
  display: flex;
  align-items:center;
}

.snirky-snark-box {
  width: 33%;
}

.promo {
  margin-top: 70px;
}

更新:

我是这样实现的:

@include breakpoint(medium down) {
  .frontpage-header-image {
    width: 100%;
    min-height: 500px;
  }
  .snirky-snark-box {
    position: absolute;
    top: 30%;
    padding-left: 30px;
  }

  .header > .columns {
    padding: 0;
  }
}

但是图像会调整大小，我需要它始终具有相同的高度，我试图通过设置最小高度来实现这一点，但它没有用:

.frontpage-header-image {
  width: 67%;
  min-height: 500px;
}

Answer 1

您可以使用媒体查询将文本 block 设置为绝对图像，然后根据您的需要对齐。

@media (max-width: 750px){
  .snirky-snark-box { 
    width: 100%; 
    position: absolute;
    left: 0;
    bottom: 20px;
  }

.header {
  position: relative;
}

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

.frontpage-header-image {
  width: 67%;
}

.frontpage-header-content {
  display: flex;
  align-items:center;
}

.snirky-snark-box {
  width: 33%;
}

.promo {
  margin-top: 70px;
}

@media (max-width: 750px){
  .snirky-snark-box { 
    width: 100%; 
    position: absolute;
    left: 0;
    bottom: 20px;
  }
}

<div class="header row">
  <div class="large-12 columns frontpage-header-content">
    <div class="snirky-snark-box">
      <h4>Vi arbeider med å bygge kompetanse, spre kunnskap og positiv energi i kreftsaken</h4>
      <button type="button" class="button">Støtt kreftsaken</button>
    </div>
    <div class="frontpage-header-image">
      <img src="http://placehold.it/800x150">
    </div>
  </div>

  <div class="header-title-bar">
    <div class="row">
      <div class="large-12 columns">
        <div class="title-bar">
          <div class="title-bar-left">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/images/menu-icon.svg">
            <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 -->