css - 不用position:absolute怎么实现类似的功能
ringa_lee
ringa_lee 2017-05-15 17:01:22
0
3
1008


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

ringa_lee
ringa_lee

ringa_lee

membalas semua(3)
漂亮男人

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>
伊谢尔伦

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.

左手右手慢动作

Teka apa yang babi besar mahukan ialah float:left

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!