Rumah  >  Soal Jawab  >  teks badan

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


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

ringa_leeringa_lee2738 hari yang lalu1009

membalas semua(3)saya akan balas

  • 漂亮男人

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

    Terima kasih atas jemputan, anda masih perlu menggunakan position:absoulte;
    Zhang Xiaozhu juga menjawab kaedah yang boleh mengubah nilai mengikut data, supaya gaya bulat boleh mengubah atas dan kiri mengikut perubahan tetapan Nilai tidak akan bersesak-sesak.

    Saya menulis contoh untuk rujukan anda.

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

    balas
    0
  • 伊谢尔伦

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

    Saya tidak begitu memahami maksud soalan tersebut Memandangkan ia telah diletakkan, nilai atas dan kiri secara semula jadi boleh ditentukan berdasarkan data, sekali gus mencapai tujuan mencipta bulatan pada banyak kedudukan yang berbeza.

    balas
    0
  • ringa_lee

    ringa_lee2017-05-15 17:03:22

    Teka apa yang babi besar mahukan ialah float:left

    balas
    0
  • Batalbalas