2
我試圖建立一個連接的柔性盒具有下列行爲...... 1）柔性箱1顯示的文本右圖像在寬屏幕分辨率 2）柔性盒2個顯示下面的文字圖像在寬屏幕分辨率 3）兩者的Flex框1和較小的屏幕分辨率停止柔性盒用文字覆蓋重疊
圖像的頂部2疊加文本到目前爲止我下面的代碼適用於情形1）和2）。但是，對於場景3），當我希望它們疊加在上面時，具有文本疊加層的圖像彼此重疊。
如何解決任何意見將不勝感激。
感謝 彼得
.imgtxtrow {
display: flex;
position: relative;
}
.imgtxtcol {
display: flex;
position: relative;
flex-direction: column;
}
.subitem {
width: 50%;
}
img {
width: 100%;
}
.text {
padding: 25px;
}
@media screen and (max-width: 750px) {
.subitem {
position: absolute;
}<html>
\t <head>
\t \t <link rel="stylesheet" href="test.css">
\t </head>
\t <body>
\t \t <div class="imgtxtrow">
\t \t \t <div class="subitem">
\t \t \t \t <div class="picture"> \t \t
\t \t \t \t \t <img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="subitem">
\t \t \t \t <div class="text"> \t \t
\t \t \t \t \t <h3>Some Text</h3> \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div style="clear:both"></div> \t
\t \t
\t \t </br></br>
\t \t <div class="imgtxtcol">
\t \t \t <div class="subitem">
\t \t \t \t <div class="picture"> \t \t
\t \t \t \t \t <img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="subitem">
\t \t \t \t <div class="text"> \t \t
\t \t \t \t \t <h3>Some Text</h3> \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>
感謝SERG，這正是我想達到:-) – phay
有沒有一種方法來對齊文本右下角？當我設置CSS底部：0;和右：0;文字從照片中消失？ – phay
我會說使用我的代碼，但增加寬度：100％;文本對齊：正確; –