0
我想要有两个div元素，一个带有一些文本和一个按钮，另一个带有一个图像，其中带有文本的那个将占用4列，而另一个带有图像的则占用8列。但是在小屏幕上，带有图像的人需要采用全屏宽度，而带有文本和按钮的div需要覆盖图像。不知道什么是实现这一目标的最佳方式，以及如何仅通过css和媒体查询来完成此操作？ 因此，这将是大屏幕的HTML：CSS - 使两个元素在小屏幕上重叠，并在大屏幕上取自己的宽度
<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;
}