全寬響應式兩列布局圖像和文本

Question

我正在嘗試尋找設計橫幅的線索，例如本頁頂部的橫幅： https://www.gazteaukera.euskadi.eus/inicio/

我正在嘗試自己，但沒有得到我想要的（見下文）。 我想在左邊有一個圖像列，在右邊有一個文本列完全對齊。 我希望它具有響應性，以便在較小的屏幕中，左列將放置在右列的頂部（頂部和底部 div 之間沒有空間）。

我在得到我想要的東西時遇到了一些問題。 我希望有一個人可以幫助我：）

代碼：

 .row { background-color: blue; padding: 0px; /*I have added a background-color to help me solve the design issues, but this is sthg to be removed*/}.column { float: left; width: 50%; padding: 0px; }.row:after { content: ""; display: table; clear: both; }.title { font-size: 24px; color: #0FD955; padding: 15px 15px 0px 15px; font-weight: bold;}.text { font-size: 18px; color: #0FD955; padding: 0px 15px 15px 15px; }.imgw100 { width: 100%; } @media screen and (max-width: 980px) {.column { width: 100%; }.right { width: 100%; }.left { width: 100%; } }

 <div class="row"> <div class="column right"> <img class="imgw100" src="https://butterfly-conservation.org/sites/default/files/styles/masthead/public/2019-03/16548509661_3bdddd5179_o.jpg" /> </div> <div class="column left" style="background-color: #022C11;"> <p class="title">Breaking news</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

Answer 1

將顯示 css 添加到行作為較大設備的 flex 添加用於小屏幕 添加顯示 css 作為行的塊

.row {
    background-color: blue;
    padding: 0px;
    display: flex;
}

.title {
    font-size: 24px;
    color: #0fd955;
    padding: 15px 15px 0px 15px;
    font-weight: bold;
}

.text {
    font-size: 18px;
    color: #0fd955;
    padding: 0px 15px 15px 15px;
}

.imgw100 {
    width: 100%;
}

@media screen and (max-width: 480px) {
    .row {
        background-color: blue;
        padding: 0px;
        display: block;
    }
}