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

您可以使用媒体查询将文本块置于图像顶部，方法是将其设置为绝对图像，然后根据需要进行对齐。

D' = C

@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;
  }
}

Answer 2

我这样做了：

   <div>  <img src="logo.gif" style="width:400px;z-index: 899;float:left;position: absolute;margin: auto;margin-left: 0px;max-width: 100%;">
          <img src="logo.gif" style="width:400px;z-index:900;float:right;position: relative;margin-right: 0;margin-left: auto;display: inline-block;max-width: 100%;"></div>

你可以为它做一个css课

CSS - 使两个元素在小屏幕上重叠，并在大屏幕上获取每个元素的宽度

2 个答案: