首页  >  问答  >  正文

css - 不用position:absolute怎么实现类似的功能


图中指的地方是用p写出来的根据绝对定位来写位置,现在想要用ng-repeat来实现多个这样的圆圈(如果传回来的数据里有相关值的话),因为要用ng-repeat,所以这些p要公用一个css,用绝对定位的话所有框都挤在一起了,请问要怎么实现呢?

ringa_leeringa_lee2689 天前968

全部回复(3)我来回复

  • 漂亮男人

    漂亮男人2017-05-15 17:03:22

    谢谢邀请,其实还是得用position:absoulte;
    张小猪也回答了方法了,ng-repeat可以根据数据来更改值啊,这样圆的style就可以根据设置变化改变top和left的值就不会挤在一起了。

    写了个例子,可以参考下。

    <style type="text/css">
    .wrap{
        position: relative;
    }
    .circle{
        background: #CCC;
        border-radius:50%;
        position: absolute;
        width:20px;
        height:20px
    }
    </style>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
    <p class="wrap" ng-repeat="x in circles">
        <p class="circle" style=top:{{x.top}};left:{{x.left}}></p>
    </p>
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.circles = [
        {top:"10px",left:"20px"},
        {top:"30px",left:"80px"},
        {top:"50px",left:"180px"},
        {top:"70px",left:"100px"},
      ]
    });
    </script>

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:03:22

    不太明白题主的意思,既然是已定位的,自然可以根据数据来确定 top 和 left 的值,于是达到很多个不同位置的圆的目的。

    回复
    0
  • ringa_lee

    ringa_lee2017-05-15 17:03:22

    猜大猪要的是float:left

    回复
    0
  • 取消回复