Возможность автоматического создания элементов родительского элемента и позиции?

Можно ли изготовить определенные элементы с определенными #ids/ автоматически сортировать &, расположенный вместе с соответствующими #ids и/или .classes? Я пытаюсь сделать так, чтобы вместо создания отдельных изображений для каждой отдельной кнопки, что бы удвоилось, возможно, утроить данные, время и пространство, или использовать position: absolute из-за разных разрешений мониторов, завинчивающих это, я хочу иметь возможность родительского элемента <p class="linkText1"> с <img class="linkText1" src="URL HERE">, так что, когда он будет сопряжен, он разместит текст в центре img и зафиксирует положение элемента p в элементе img. Вот мой код и моя попытка написать JavaScript для обнаружения.Возможность автоматического создания элементов родительского элемента и позиции?

/* var pair = function() { 
 
    if(this.class === this.class) { 
 
    this.style.text-align = "center"; 
 
    this.style.position = "relative"; 
 
    this.style.position = "absolute"; 
 
    } 
 
    } 
 
pair(img, para); 
 
*/

.nav { 
 
    
 
} 
 
.navlinks { 
 

 
} 
 
.navlinks a { 
 
    font-family: "Lietz", arial; 
 
    text-decoration: none; 
 
    font-size: 110%; 
 
    color: #FFA500; 
 
    text-shadow: 
 
    -1px -1px 0 #000, 
 
    1px -1px 0 #000, 
 
    -1px 1px 0 #000, 
 
    1px 1px 0 #000; 
 
} 
 
.news { 
 

 
} 
 
.donate { 
 

 
} 
 
.content { 
 

 
} 
 
.footer { 
 

 
} 
 
.footlinks { 
 

 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="http://www.thegaminghideout.com/fonts/font.css"> 
 
    </head> 
 
    <body> 
 
    <div id="wrap"> 
 
     <div class="nav"> 
 
     <div class="navlinks"> 
 
      <a href="#"><img src='http://www.thegaminghideout.com/css/ButtonA.png' width='120' height='35' onmouseover="this.src='http://www.thegaminghideout.com/css/ButtonB.png';" onmouseout="this.src='http://www.thegaminghideout.com/css/ButtonA.png';" /><p class="linkText">Link 1</p></a> 
 
     </div> 
 
     </div> 
 
     <div class="news"> 
 
     
 
     </div> 
 
     <div class="donate"> 
 

 
     </div> 
 
     <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper auctor nunc, ac rhoncus ligula. Nunc vel magna dignissim, finibus augue in, ultrices urna. In auctor id sapien sit amet facilisis. Nulla facilisi. Vivamus semper erat at nisi euismod facilisis. Nunc pharetra vel risus scelerisque posuere. Suspendisse malesuada magna ut faucibus consectetur. 
 
      Aenean hendrerit fringilla lorem dictum tincidunt. Etiam libero tortor, dignissim ac consequat ut, ultricies in odio. Donec vel dui non metus lacinia vehicula ut sagittis orci. Pellentesque mauris mauris, dapibus ac sagittis a, volutpat id tortor. Donec tempor ante lobortis massa feugiat, sit amet molestie magna vestibulum. Sed hendrerit metus suscipit feugiat faucibus. Sed eget justo ligula. Morbi scelerisque sagittis sem, ut semper quam convallis lacinia. Vestibulum ac suscipit ex. Vivamus pharetra tellus ac tellus auctor, sed vestibulum enim commodo. Curabitur cursus sollicitudin eleifend. Ut tempor venenatis lacus, tristique congue libero scelerisque et. Pellentesque vehicula rhoncus orci ac dapibus. Pellentesque feugiat sem diam, ut porttitor mi accumsan sagittis. 
 

 
      Mauris lectus turpis, dignissim quis sagittis ac, pellentesque sit amet felis. Vestibulum auctor ex non ullamcorper porta. Aliquam feugiat posuere arcu, nec sagittis nisl fringilla sed. Integer quis metus congue, dapibus nisl non, accumsan quam. Duis sodales, erat non varius gravida, dolor orci tempor lectus, eu egestas felis ipsum eu sem. Suspendisse vitae tellus accumsan, tempor sapien vitae, tincidunt nisl. Donec egestas neque quis orci sodales, at maximus purus posuere. Phasellus ut arcu quis mauris accumsan rhoncus. Morbi in risus non dui aliquet molestie. Quisque volutpat enim vel est vehicula laoreet.</p> 
 
     </div> 
 
     <div class="footer"> 
 
     <div class="footlinks"> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2015-02-03 The Gaming Hideout

Ваш вопрос неясен, пожалуйста, добавить больше информации и понятный код. – Vijay

Помните, вы также можете установить img как свойство backround ... – maioman

вам не нужно JavaScript для того, CSS будет делать это на основе классов.

div{border:1px solid red;} 
 
p{border:1px solid green;} 
 
img{opacity:0.4;} 
 
.one{position:absolute;top:0px;left:0px;} 
 
.two{position:absolute;top:0px;right:0px;} 
 
.three{position:absolute;bottom:0px;left:0px;} 
 
.four{position:absolute;bottom:0px;right:0px;}

<div class="one" >div one </div> 
 
<div class="two" >div two </div> 
 
<div class="three" >div three </div> 
 
<div class="four" >div four </div> 
 
<p class="one"> p one</p> 
 
<p class="two">p two </p> 
 
<p class="three">p three</p> 
 
<p class="four">p four </p> 
 
<img class="one" src="http://lorempixel.com/50/50"/> 
 
<img class="two" src="http://lorempixel.com/50/50"/> 
 
<img class="three" src="http://lorempixel.com/50/50"/> 
 
<img class="four" src="http://lorempixel.com/50/50"/>

источник

2015-02-03 15:42:19 Billy

Спасибо, это сработало! Мне нужно помнить об этом, ADHD плохо для памяти ... –

Рад, что это сработало для вас. – Billy

Возможность автоматического создания элементов родительского элемента и позиции?

ответ

Смежные вопросы