Question

我想知道是否有任何方法可以让某个班级的每个元素都处于同一个位置？我想要做的是当你悬停某个图像时，我希望有关该图像的文本显示在所有其他图像之间的中心位置。我知道如何通过对每个元素的位置进行硬编码来做到这一点，但这是一种痛苦，并且使用内联样式并不是一种好的做法。

所以我的问题是：如何让某个班级的每个元素都处于相同的位置？

以下是示例：http://homeinspectioncarync.com/testpage/

以下是代码：

HTML：

<div class="image-container">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/00c/2ab/35ae340.jpg" class="images">
  <p class="fixed">Dave</p>
  <p class="para name">Dave</p>
  <p class="para title" ">Senior Inspector</p> 
<p class ="para bio " >"This is an example of a Bio. We need to get a bio for each one of our inspectors in order to complete this page! "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectionraleighnc.com/wp-content/uploads/2010/11/Glenns-Photo-1.png " class="images "> 
<p class="fixed ">Glenn</p> 
<p class="para name " >Glenn </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >"Licensed: State Home Inspector, General Contractor, Sub-surface Waste Water Inspector. Part owner and senior inspector, responsible for maintaining the highest quality of the field inspections, including both the comprehensiveness
    of the inspection itself and the interpersonal relationships with the client, realtor and all other personal involved in the inspection process. "</p> 
</div> 
<div class="image-container ">
<img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/p160x160/18718_2753855091076_8128390731521222770_n.jpg?oh=d1d49aea28d3cb6ff76033db1ae056ba&oe=57D998E2 " class="images "> <p class="fixed ">Spencer</p> 
<p class="para name " >Spencer</p>
 <p class ="para title " >Trainee</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/c22.22.272.272/s160x160/166620_1817593049535_5878435_n.jpg?oh=78d8a42398b126fc1f75d1b32295029a&oe=57D73E8C " class="images "> <p class="fixed ">Chuck</p> 
<p class="para name ">Chuck </p> 
<p class ="para title " >Senior Inspector</p>
<p class ="para bio ">" "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/trevor-e1464897672300.jpg " class="images "> 
<p class="fixed ">Trevor</p> 
<p class="para name ">Trevor </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/betterrob-e1464897851528.jpg " class="images "> <p class="fixed ">Rob</p> 
<p class="para name ">Rob </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png " class="images "> 
<p class="fixed ">Anthony</p> 
<p class="para name " >Anthony</p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div>

CSS：

.images {
  height: 100px;
  width: 100px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 1000ms ease;
}

.image-container {
  position: relative;
  margin-left: 80px;
  display: inline-block;
}

.image-container:hover .images {
  opacity: 0.5;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.para {
  position: absolute;
  display: inline-block;
  font-size: 200%;
  opacity: 0;
  transition: all 1000ms ease;
}

.image-container:hover .para {
  opacity: 1;
}

.para.name {
  position: absolute;
  font-size: 200%;
  font-weight: bold;
  color: #01ba7c;
}

.para.title {
  position: absolute;
  font-size: 170%;
  font-style: italic;
  color: grey;
}

.para.bio {
  position: absolute;
  font-size: 150%;
  width: 450px;
  height: 300px;
  color: #000000;
}

.fixed {
  position: absolute;
  top: -30px;
  left: 20px;
  font-size: 150%;
  color: #000000;
}

我希望.para.name＆＃39; s全部出现在中心的第一行图像下面。 .para.title和.para.bio也应位于中心，但在.para.name的左侧。

提前感谢您对此有任何帮助！

Answer 1

一种方法是getElementsByClassName使用JavaScript，迭代返回的集合并为每个元素设置相同的位置。

像this之类的东西。

注意：我已经在你使用过的课程上设置了position: fixed;，可能不是你想要在这种情况下做的事情，但如果你修补一下你会得到你需要的东西。

Answer 2

如果删除图像容器上的定位并将它们放在像行一样的父元素上，则可以。 CSS看起来像这样：

.et_pb_module {
  position: relative;
}

.images {
  height: 100px;
  width: 100px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 1000ms ease;
}

.image-container {
  margin-left: 80px;
  display: inline-block;
}

.image-container:hover .images {
  opacity: 0.5;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.para {
  position: absolute;
  display: inline-block;
  font-size: 200%;
  opacity: 0;
  transition: all 1000ms ease;
}

.image-container:hover .para {
  opacity: 1;
}

.para.name {
  position: absolute;
  top: 100%;
  left: 50px;
  font-size: 200%;
  font-weight: bold;
  color: #01ba7c;
}

.para.title {
  position: absolute;
  top: 100%;
  left: 50px;
  margin: 30px 0 0;
  font-size: 170%;
  font-style: italic;
  color: grey;
}

.para.bio {
  position: absolute;
  top: 100%;
  left: 50px;
  margin: 90px 0 0;
  font-size: 150%;
  width: 450px;
  height: 300px;
  color: #000000;
}

.fixed {
  font-size: 150%;
  color: #000000;
}

因为每个元素都是绝对定位的，所以它无法根据换行等内容调整它的渲染位置。这意味着即使没有第二条线，您也需要一条额外的线，否则它会看起来很破碎。理想情况下，您可以将.name，.title和.bio包装在容器中并绝对放置，这样您就不必担心名称或标题包装。

一个类的所有元素都可以放在同一个位置吗？

2 个答案: