Bir resmin etrafındaki blokları hizalama angularjs

Mobil uygulama geliştirmek için İyonik çerçeve kullanarak Iam. 'u aşağıdaki resimde gösterilen sonuca ulaşmak istiyorum. Burada her başlık altındaki metnin bir kutuda olması gerekir (ng-hide ve ng-show kullanarak).Bir resmin etrafındaki blokları hizalama angularjs

bunu düzeltmek olamazdı:

Ama ne var bu karmaşa. İşte şimdiye kadar benim kodudur:

 <div class="contenu"> 


    <div class="card-left"> 
     <div class="box1"> 
      <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="text4"> MyRhoom: </a> 
      <div class="boxed" ng-show="collapsed" >I am description</div> 
     </div> 

     <div class="box2"> 
      <a href="#" ng-model="collapsed2" ng-click="collapsed2=!collapsed2" class="text5"> Talent: </a> 
      <div class="boxed" ng-show="collapsed2" >I am description</div> 
     </div> 
    </div> 


    <div align="center"> 
     <img src="img/Image2.jpg" class="im"> 
     <div class="box3"> 
      <a href="#" ng-model="collapsed3" ng-click="collapsed3=!collapsed3" class="text1"> WTR: </a> 
      <div class="boxed" ng-show="collapsed3" >I am description</div> 
     </div> 
    </div> 


    <div class="card-right"> 

     <div class="box4"> 
     <a href="#" ng-model="collapsed4" ng-click="collapsed4=!collapsed4" class="text2"> Skype: </a> 
     <div class="boxed" ng-show="collapsed4">I am description</div> 
     </div> 
     <div class="box5"> 
     <a href="#" ng-model="collapsed5" ng-click="collapsed5=!collapsed5" class="text3"> Ulysse: </a> 
     <div class="boxed" ng-show="collapsed5">I am description</div> 
     </div> 
     <div class="box6"> 
     <a href="#" ng-model="collapsed6" ng-click="collapsed6=!collapsed6" class="text6"> Egencia: </a> 
     <div class="boxed" ng-show="collapsed6" >I am description</div> 
     </div> 

    </div> 

    </div> 
</div>

CSS ben birlikte bir div her kutu ve açıklamasını koymak

@media only screen and (max-width: 720px) { 

.text1 { 

position: absolute; 
display: inline-block; 
left: 5%; 
top: 60%; 
font-size: 14pt; 

} 

.text2 { 

position: absolute; 
display: inline-block; 
left:80%; 
top: 60%; 
font-size: 14pt; 

} 

.text3 { 

position: absolute; 
display: inline-block; 
left: 5%; 
top: 80%; 
font-size: 14pt; 

} 

.text4 { 

position: absolute; 
display: inline-block; 
left: 38%; 
top: 60%; 
font-size: 14pt; 

} 

.text5{ 

position: absolute; 
display: inline-block; 
left: 80%; 
top: 80%; 
    font-size: 14pt; 

} 

.text6 { 

position: absolute; 
display: inline-block; 
left: 38%; 
top: 98%; 
    font-size: 14pt; 

} 

}

. Neyi kaçırıyorum? Yardımlarınız için teşekkür ederiz.

kaynak

2016-04-08 Hana

Bu rotadan aşağı inme konusunda% 100 emin iseniz, DIVS'lerin her biri ekran boyutuna göre piksele göre yerleştirilmelidir. Bunu yapmaya karşı şiddetle tavsiye ederim, ama senin seçimin. –

**I believe it will work for you.....**

Not: Resmi arka plan olarak kullandım; bu nedenle görüntüdeki metni kaldırmayı unutmayın.

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Solution provided by Areraj.in</title> 


     <style> 
    /*@media only screen and (max-width: 720px) {*/ 
    .box1{position: absolute;top: 65px;left: 47px;} 
    .box2{position: absolute;top: 250px;left: 57px;} 
    .box3{position: absolute;top: 18px;left: 177px;} 
    .box4{position: absolute;top: 46px;left: 316px;} 
    .box5{position: absolute;top: 134px;left: 353px;} 
    .box6{position: absolute;top: 241px;left: 336px;} 




    .contenu{position:relative; width:435px; height:292px; overflow:hidden; background:url("http://i.stack.imgur.com/YNuI9.png");} 

    /*}*/ 
     </style> 
    </head> 
    <body> 

    <div class="contenu"> 



      <div class="box1"> 
       <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="text4"> MyRhoom: </a> 
       <div class="boxed" ng-show="collapsed" >I am description</div> 
      </div> 

      <div class="box2"> 
       <a href="#" ng-model="collapsed2" ng-click="collapsed2=!collapsed2" class="text5"> Talent: </a> 
       <div class="boxed" ng-show="collapsed2" >I am description</div> 
      </div> 




      <div class="box3"> 
       <a href="#" ng-model="collapsed3" ng-click="collapsed3=!collapsed3" class="text1"> WTR: </a> 
       <div class="boxed" ng-show="collapsed3" >I am description</div> 
      </div> 

      <div class="box4"> 
      <a href="#" ng-model="collapsed4" ng-click="collapsed4=!collapsed4" class="text2"> Skype: </a> 
      <div class="boxed" ng-show="collapsed4">I am description</div> 
      </div> 
      <div class="box5"> 
      <a href="#" ng-model="collapsed5" ng-click="collapsed5=!collapsed5" class="text3"> Ulysse: </a> 
      <div class="boxed" ng-show="collapsed5">I am description</div> 
      </div> 
      <div class="box6"> 
      <a href="#" ng-model="collapsed6" ng-click="collapsed6=!collapsed6" class="text6"> Egencia: </a> 
      <div class="boxed" ng-show="collapsed6" >I am description</div> 
      </div> 



     </div> 


    </body> 
    </html>

kaynak

2016-04-08 09:48:17

Bir resmin etrafındaki blokları hizalama angularjs

cevap

İlgili konular