通过悬停将图像并排对齐

Question

<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我已经尝试了一切它不起作用我想要3个图像并排悬停和标题，目前我从上到下有 3 张图像，悬停效果良好，但不能并排。如何使图像并排显示？谢谢。

Answer 1

您必须float向选择器添加属性container2。请检查下面的 CSS 规则。.container2 {&nbsp; float: left;&nbsp; position: relative;&nbsp; width: 250px;}

Answer 2

.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>为什么不网格显示属性？

Answer 3

对于这些这样的场景，有一个美丽/干净/简单的概念，flex它可以通过减少代码行数来提供帮助：column这是,color和效果的示例hover，希望对您有所帮助：#MainDiv {&nbsp; height: 200px;&nbsp; width: 650px;&nbsp; display: flex;&nbsp; /* here is a concept */&nbsp; flex-direction: row;&nbsp; /* you can either change it to row/columns */&nbsp; padding: 5px;}#firstDiv {&nbsp; width: 200px;&nbsp; margin: 5px;&nbsp; background-color: red;}#secondDiv {&nbsp; width: 200px;&nbsp; margin: 5px;&nbsp; background-color: blue;}#thirdDiv {&nbsp; width: 200px;&nbsp; margin: 5px;&nbsp; background-color: green;}#firstDiv:hover {&nbsp; background-color: blue;&nbsp; color: white;}#secondDiv:hover {&nbsp; background-color: green;&nbsp; color: white;}#thirdDiv:hover {&nbsp; background-color: red;&nbsp; color: white;}<div id="MainDiv">&nbsp; <div id="firstDiv">First Div</div>&nbsp; <div id="secondDiv">Second Div</div>&nbsp; <div id="thirdDiv">Third Div</div></div>