Question

我使用Ionic框架开发移动应用程序。我想实现结果如下图所示，每个标题下的文本应该放在一个方框中（使用ng-hide和ng-show）。

但我得到的是这个烂摊子：

我无法修复它。到目前为止，这是我的代码：

      <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

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

}

}

我将每个方框及其描述放在一个div中。我错过了什么？谢谢你的帮助。

Answer 1

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

注意：我使用图像作为背景，所以不要忘记从图像中删除文本。

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

对齐图片angularjs周围的块

1 个答案: