简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 不用position：absolute怎么实现类似的功能
ringa_lee
ringa_lee 2017-05-15 17:01:22
0
3
1006


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

ringa_lee
ringa_lee

ringa_lee

Antworte allen(3)
漂亮男人
漂亮男人2017-05-15 17:03:22 3 Etage

谢谢邀请，其实还是得用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>
Wie +0
Antwort hinzufügen
伊谢尔伦
伊谢尔伦2017-05-15 17:03:22 2 Etage

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

Wie +0
Antwort hinzufügen
左手右手慢动作
左手右手慢动作2017-05-15 17:03:22 1 Etage

猜大猪要的是float:left

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！