通过悬停将图像并排对齐

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 {

  float: left;

  position: relative;

  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 {

  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>