Community Learn Tools Library Leisure
search
English
css - How to achieve similar functions without using position:absolute
ringa_lee
ringa_lee 2017-05-15 17:01:22
0
3
1045


The place pointed to in the picture is written with p. The position is written based on absolute positioning. Now I want to use ng-repeat to achieve multiple such circles (if passed back If there are relevant values ​​in the data), because ng-repeat is used, these ps need to share a css. If absolute positioning is used, all the boxes will be crowded together. How to achieve this?

ringa_lee
ringa_lee

ringa_lee

reply all(3)
漂亮男人
漂亮男人2017-05-15 17:03:22 3 floor

Thank you for the invitation. In fact, you still have to use itposition:absoulte;
Zhang Xiaozhu also answered the method. ng-repeat can change the value according to the data, so that the round style can change the top and left values ​​​​according to the setting changes without crowding. Together.

I wrote an example for your reference. 

<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>
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-05-15 17:03:22 2 floor

I don’t quite understand the meaning of the question. Since it has been positioned, the values ​​of top and left can naturally be determined based on the data, thus achieving the purpose of creating circles at many different positions.

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-05-15 17:03:22 1 floor

Guess what the big pig wants is float:left

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template