Question

这些图片使用CSS代码进行悬停效果，一切正常，但我不知道如何重新安排他们在页面上的位置。

现在他们是水平地在彼此之上，我怎么能并排？：

＆＃13;

body {
      color:#000000;
      background-color:#000000;
      background-image:url('Background Image');
      background-repeat:no-repeat;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    #cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

＆＃13;

<a href="http://example.com/page1">
<div id="cf">
<img class="bottom" src="images/img_a_1.jpg" />
<img class="top" src="images/img_a_2.jpg" />
</div></a>

<a href="http://example.com/page2">
<div id="cf">
<img class="bottom" src="images/img_b_1.jpg" />
<img class="top" src="images/img_b_2.jpg" />
</div></a>

<a href="http://example.com/page3">
<div id="cf">
<img class="bottom" src="images/img_c_1.jpg" />
<img class="top" src="images/img_c_2.jpg" />
</div></a>

＆＃13;

Answer 1

正如arhak先前所说，我们不会在页面上多次使用id，它们必须是唯一的。以下是以下更改：

将每个#cf更改为班级.cf。
为每个display:table-cell添加了.cf，以便它们并排显示。
将每个.cf维度更改为可管理的50 x 50px。
将无法运作的<img> src替换为工作值*。
将每个.cf的尺寸减小到50 x 50px *。

除第一次和第二次更改外，所有这些更改都是可选的。

*我知道你的亲戚网址对你有用，但是一个在这里不起作用的例子会让事情变得更难以证明。将来如果您有图像，请在示例中使用相同大小的图像或图像。如果我们不知道50 x 50px不足以满足您的要求，那么这将减慢查找解决方案的过程。

段

＆＃13;

body {
  color: #fff;
  background-color: #000000;
  background-image: url('Background Image');
  background-repeat: no-repeat;
}
a {
  color: #0000FF;
}
a:visited {
  color: #800080;
}
a:hover {
  color: #008000;
}
a:active {
  color: #FF0000;
}
.cf {
  position: relative;
  height: 50px;
  width: 50px;
  margin: 0 auto;
  display:table-cell;
}
.cf img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}
.cf img.top:hover {
  opacity: 0;
}

＆＃13;

<body>
  <a href="http://example.com/page1">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/00f/fff?text=1'>
      <img class="top" src='http://placehold.it/50x50/cf0/000?text=2'>
    </div>
  </a>

  <a href="http://example.com/page2">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/0e0/110?text=3'>
      <img class="top" src='http://placehold.it/50x50/0bb/011?text=4'>
    </div>
  </a>

  <a href="http://example.com/page3">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/fff/000?text=5'>
      <img class='top' src='http://placehold.it/50x50/f00/fff?text=6'>
    </div>
  </a>
</body>

＆＃13;

Answer 2

 body {
      color:#000000;
      background-color:#000000;
      background-image:url('Background Image');
      background-repeat:no-repeat;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    

#cf img {
  text-align: center;
}

#cf img.top:hover {
  opacity:0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<a href="http://example.com/page1">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_a_1.jpg" />
<img class="top col-xs-6" src="images/img_a_2.jpg" />
</div></a>

<a href="http://example.com/page2">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_b_1.jpg" />
<img class="top col-xs-6" src="images/img_b_2.jpg" />
</div></a>

<a href="http://example.com/page3">
<div class="col-xs-12 form-group" id="cf">
<img class="bottom col-xs-6" src="images/img_c_1.jpg" />
<img class="top col-xs-6" src="images/img_c_2.jpg" />
</div></a>
  </body>

在页面上定位图像（HTML）

2 个答案:

段