Question

是否有可能使某些元素与某些#ids / .classes自动成为父级。与匹配#ids和/或.classes一起定位？我试图这样做，而不是为每个单独的按钮制作单独的图像，这可能会增加一倍，可能会使数据，时间和空间消耗增加三倍，或者使用position: absolute，因为显示器的分辨率不同为此，我希望能够使用<p class="linkText1">为<img class="linkText1" src="URL HERE">元素添加父级，这样当它配对时，它会将文本放在img的中心，并修复p元素到img元素的位置。这是我的代码，我尝试编写用于检测的JavaScript。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你不需要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"/>

自动生成父母和儿童的可能性位置元素？

1 个答案: