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