Question

我正在尝试在一行中制作4个图像框，这些图像框在悬停时都可以替换。每个图像都是不同的，每个图像替换它都是不同的。

到目前为止，我正在使用： .image1 { background-image：url（＆＃34; http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png＆＃34;）; 身高：xx; 宽度：yy; }

.image1：hover { background-image：url（＆＃34; http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/so-much-more.png＆＃34;）; }

一

当我试图将其中的4个放在一行上时，它们在一列中对齐而不是在一行上。我如何将它们排成一行。感谢

<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>

Answer 1

添加父元素，然后指定display: flex;

＆＃13;

.wrap {
  display: flex;
}

.image1 {
  background-image: url("http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png");
  height: 100px;
  width: 100px;
}

.image1:hover {
  background-image: url("http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/so-much-more.png");
}

＆＃13;

<div class="wrap">
  <div class="image1"></div>
  <div class="image1"></div>
  <div class="image1"></div>
  <div class="image1"></div>
</div>

＆＃13;

Answer 2

添加到您的CSS：

float|integer

Answer 3

如果你想将你的div放在一行（连续）

display: inline-block;`

或者你可以做

display: flex; 
flex-flow: row; 
flex-direction: row;

到你的css

Answer 4

我会漂浮它们。

.image1{
float:left;
margin-left:5px;
margin-right:5px;
}

或者您也可以使显示内联块

.image1{
display:inline-block;
margin-left:5px;
margin-right:5px;
}

使用悬停替换图像

4 个答案: