Können alle Elemente einer Klasse in die gleiche Position gebracht werden?

Question

Ich frage mich, ob es irgendeinen Weg gibt, wie ich jedes Element einer bestimmten Klasse an die gleiche Position bringen kann? Was ich versuche zu tun, ist, wenn Sie ein bestimmtes Bild bewegen, ich möchte, dass Text über dieses Bild an einer zentralen Stelle zwischen allen anderen Bildern erscheint. Ich weiß, wie man das macht, indem man die Position jedes Elements fest codiert, aber das ist ein Schmerz und keine gute Übung beim Inline-Styling.

Meine Frage ist also: Wie kann ich jedes Element einer bestimmten Klasse in die gleiche Position bringen? Hier

ist das Beispiel: http://homeinspectioncarync.com/testpage/

Hier ist der Code:

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; 
} 

Ich würde für die .para mögen. Der Name erscheint für alle unter der ersten Reihe von Bildern in der Mitte. Die .para.titles und die .para.bio's sollten ebenfalls in der Mitte sein, aber links vom .para.name.

Vielen Dank im Voraus für jede Hilfe mit diesem!

Answer 1

Eine Möglichkeit besteht darin, mit JavaScript getElementsByClassName zu verwenden, um die zurückgegebene Auflistung zu durchlaufen und für jedes der Elemente dieselbe Position festzulegen.

Etwas wie this.

Hinweis: Ich habe position: fixed; auf Klassen, die Sie verwendet haben, wahrscheinlich nicht das, was Sie in diesem Szenario tun möchten, aber wenn Sie herum basteln, erhalten Sie, was Sie benötigten.

Answer 2

Sie können, wenn Sie die Positionierung auf dem Bildcontainer entfernen und sie an einem übergeordneten Element wie der Zeile positionieren. Die CSS würde wie folgt aussehen:

.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; 
} 

Da jedes Element absolut positioniert wird, wird es nicht in der Lage sein, es zu machen Position auf Dinge wie Zeilenumbruch basierte anzupassen. Das bedeutet, dass Sie entweder eine zusätzliche Zeile benötigen, auch wenn keine zweite Zeile vorhanden ist, oder sie wird beschädigt angezeigt. Im Idealfall würden Sie .name, .title und .bio in einen Container einfügen und so positionieren, dass Sie sich keine Gedanken über den Namen oder die Titelumhüllung machen müssen.