我正在嘗試在css/html.
我在我的部分有一張照片，旁邊有文字。當視窗大小低于 1300 像素時，我想將我的圖片放在文本上方。
我試過玩width/ display/flex但它不起作用。有任何想法嗎？
HTML部分：
<section class="who" id="who">
<div class="max-width">
<h2 class="title"> Qui suis-je ? </h2>
<div class="who-content">
<div class="column left">
<img src="Profil1.jpeg" alt="">
</div>
<div class="column right">
<div class="text">
<p>Lorem</p>
<a href="#"><i class="fa-solid fa-file-code"> C.V </i></a>
</div>
</div>
</div>
</div>
</section>
CSS部分：
@media(max-width:1300px){
.max-width{
margin-left: 0px;
max-width: 800px;
}
.who .who-content .left img{
height: 350px;
width: 350px;
}
.who .who-content .column{
width: 100%;
}
.who .who-content .left{
display: flex;
justify-content: center;
margin: 0 auto 60px;
}
.who .who-content .right{
flex:100%;
}
}
uj5u.com熱心網友回復：
flex在 CSS 中使用，您可以在媒體查詢中設定flex-flow為column，以便文本按預期位于影像下方。但是您想在父元素上設定display: flexandflex-flow: column屬性，例如section我在下面的代碼中使用的標記：
.who-content {
display: flex;
}
@media(max-width:1300px) {
.max-width {
margin-left: 0px;
max-width: 800px;
}
.who-content {
flex-flow: column;
}
.who .who-content .left img {
height: 350px;
width: 350px;
}
.who .who-content .column {
width: 100%;
}
.who .who-content .left {
justify-content: center;
margin: 0 auto 60px;
}
.who .who-content .right {
flex: 100%;
}
}<section class="who">
<div class="max-width">
<h2 class="title"> Qui suis-je ? </h2>
<div class="who-content">
<div class="column left">
<img src="Profil1.jpeg" alt="">
</div>
<div class="column right">
<div class="text">
<p>Lorem </p>
<a href="#"><i class="fa-solid fa-file-code"> C.V </i></a>
</div>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
嘗試這個：
/*here goes the code for when its above 1300px*/
@media screen and (max-width: 1300px) {
/*here goes the code for when its under 1300 pixels*/
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445451.html