我知道如何包裝物品（理論上），但我一定做錯(cuò)了什么。這些都是拒絕的。我只想要兩個(gè)并排的配置文件，當(dāng)窗口寬度縮小時(shí)，它們堆疊成一列。此刻，它們有點(diǎn)擠在一起并重疊。#profile-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; padding-bottom: 5%;}.profile-desc { width: 35%; margin: 5% 5%; text-align: center;}#profileM { height: 230px; width: 219px;}#profileF { height: 230px; width: 219px;}<div id="profile-container"> <div class="profile-desc" style="float:left;width:35%;padding: 5px;"> <img src="images/male.jpg" id="profileM"> <h3 style="color:white;background-color:rgb(244,212,69);"> Name </h3> <h4 style="color: rgb(244,212,69);"> Occupation </h4> <p> Description </p> </div> <div class="profile-desc" style="float:right;width:35%; padding: 5px;"> <img src="images/female.jpg" id="profileF"> <h3 style="color:white;background-color:rgb(244,212,69);"> Name </h3> <h4 style="color: rgb(244,212,69);"> Occupation </h4> <p> Description </p> </div></div>
2 回答
溫溫醬
TA貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊
您正在尋找的是CSS媒體查詢，它允許您在滿足有關(guān)設(shè)備的某些條件（例如寬度或方向）時(shí)應(yīng)用CSS。
我調(diào)整了您的代碼，添加了媒體查詢行（我還刪除了一些不需要的 Flex 屬性并刪除了一些多余的內(nèi)聯(lián)樣式.profile-desc）
#profile-container {
? padding-bottom: 5%;
}
.profile-desc {
? float: left;
? width: 35%;
? margin: 5% 5%;
? text-align: center;
}
#profileM {
? height: 230px;
? width: 219px;
}
#profileF {
? height: 230px;
? width: 219px;
}
@media(max-width: 580px) {
? .profile-desc {
? ? width: 100%;
? ? margin: 0;
? }
}
<div id="profile-container">
? <div class="profile-desc">
? ? <img src="images/male.jpg" id="profileM">
? ? <h3 style="color:white;background-color:rgb(244,212,69);">
? ? ? Name
? ? </h3>
? ? <h4 style="color: rgb(244,212,69);">
? ? ? Occupation
? ? </h4>
? ? <p>
? ? ? Description
? ? </p>
? </div>
? <div class="profile-desc">
? ? <img src="images/female.jpg" id="profileF">
? ? <h3 style="color:white;background-color:rgb(244,212,69);">
? ? ? Name
? ? </h3>
? ? <h4 style="color: rgb(244,212,69);">
? ? ? Occupation
? ? </h4>
? ? <p>
? ? ? Description
? ? </p>
? </div>
</div>
UYOU
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以通過告訴它內(nèi)容的大小來避免媒體查詢并依賴 Flexbox 適應(yīng)性。flex-basis: content取得了相同的結(jié)果，但沒有得到廣泛支持。相關(guān)的變化是：
.profile-desc {
flex-basis: 35%;
}- 2 回答
- 0 關(guān)注
- 128 瀏覽
添加回答
舉報(bào)
0/150
提交
取消