html - 事业部定位

Question

下面是html

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

#cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
}

#cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
} 

<div class="container">
    <div id="cf">
        <img class="bottom" src="http://placehold.it/640x360" />
        <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
        <img class="bottom" src="http://placehold.it/640x360" />
        <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
         <img class="bottom" src="http://placehold.it/640x360" />
         <img class="top" src="http://placehold.it/640x360" />
    </div><!--
 --><div id="cf">
         <img class="bottom" src="http://placehold.it/640x360" />
         <img class="top" src="http://placehold.it/640x360" />
    </div>
</div>

背景正确对齐，但图像偏移。我做错了什么？为什么图像没有正确定位？所有使用的图像尺寸均为 360px 高和 640px 宽。

Answer 1

图像偏移是因为您在容器上使用了 text-align:center，这意味着您定位的子元素的原点不再是 0 0，而是50% 0(中上):

.container {
  ...
  text-align:center;
}

要解决这个问题，您只需要为子元素覆盖它:

#cf {
  ..
  text-align: left;
}

下面的演示

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

#cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
  text-align: left;
}

#cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
} 

<div class="container">
            <div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div>
</div>

但是您的 HTML 无效。 ID 必须是唯一的。你应该像这样为你的 cf 元素使用一个 class...

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
  text-align: left;
}

.cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.cf img.top:hover {
  opacity:0;
} 

<div class="container">
            <div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div class="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div>
</div>