<div align="center"><div class="container2"> <a href="D:/Games/CIC/MFWS/discussion.html"><img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px"></a> <div class="overlay"> <div class="text">Here you can discuss different topics and ask or answer questions.</div> </div></div><div class="container2"> <img src="download.png" alt="Avatar" class="image"> <div class="overlay overlay2"> <div class="text">Bottom</div> </div></div><div class="container2"> <img src="download.png" alt="Avatar" class="image"> <div class="overlay overlay3"> <div class="text">Bottom</div> </div></div></div> 我想讓圖像彼此相鄰，但我不知道為什么或如何，這是CSS我已經(jīng)嘗試了一切它不起作用我想要3個(gè)圖像并排懸停和標(biāo)題，目前我從上到下有 3 張圖像，懸停效果良好，但不能并排。如何使圖像并排顯示？謝謝。
3 回答
當(dāng)年話下
TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
您必須float向選擇器添加屬性container2。請檢查下面的 CSS 規(guī)則。
.container2 {
float: left;
position: relative;
width: 250px;
}
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
.container {
? width: 400px;
? height: 400px;
? padding: 0px;
? display: grid;
? grid-template-columns: auto auto auto;
}
.item {
? width: 100px;
? height: 200px;
? margin: 2px;
}
<div class="container">
? <div class="item" style="background-color:red">
? </div>
? <div class="item" style="background-color:blue">
? </div>
? <div class="item" style="background-color:yellow">
? </div>
</div>
為什么不網(wǎng)格顯示屬性？
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
對于這些這樣的場景，有一個(gè)美麗/干凈/簡單的概念，flex它可以通過減少代碼行數(shù)來提供幫助：
column這是,color和效果的示例hover，希望對您有所幫助：
#MainDiv {
height: 200px;
width: 650px;
display: flex;
/* here is a concept */
flex-direction: row;
/* you can either change it to row/columns */
padding: 5px;
}
#firstDiv {
width: 200px;
margin: 5px;
background-color: red;
}
#secondDiv {
width: 200px;
margin: 5px;
background-color: blue;
}
#thirdDiv {
width: 200px;
margin: 5px;
background-color: green;
}
#firstDiv:hover {
background-color: blue;
color: white;
}
#secondDiv:hover {
background-color: green;
color: white;
}
#thirdDiv:hover {
background-color: red;
color: white;
}
<div id="MainDiv">
<div id="firstDiv">First Div</div>
<div id="secondDiv">Second Div</div>
<div id="thirdDiv">Third Div</div>
</div>
- 3 回答
- 0 關(guān)注
- 169 瀏覽
添加回答
舉報(bào)
0/150
提交
取消