css - 不用position:absolute怎么实现类似的功能
问题描述
图中指的地方是用p写出来的根据绝对定位来写位置,现在想要用ng-repeat来实现多个这样的圆圈(如果传回来的数据里有相关值的话),因为要用ng-repeat,所以这些p要公用一个css,用绝对定位的话所有框都挤在一起了,请问要怎么实现呢?
问题解答
回答1:谢谢邀请,其实还是得用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 ng-repeat='x in circles'> <p 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>回答2:
不太明白题主的意思,既然是已定位的,自然可以根据数据来确定 top 和 left 的值,于是达到很多个不同位置的圆的目的。
回答3:猜大猪要的是float:left
相关文章:
1. javascript - 求解答:实例对象调用constructor,此时constructor内的this的指向?2. python中生产者消费者线程问题3. css - chrome浏览器input记录上次cookie信息后,有个黄色背景~如何去除!4. html5 - 在一个页面中 初始了两个swiper 不知道哪里错了 一直不对5. 请教,关于python字典,合并相同值的键的实现方法6. python的MySQLdb库中的executemany方法如何改变默认加上的单引号?7. android - 京东移动端网页和其app加载的url所做的呈现不应该是完全一样的吗?8. mysql5.7就没有官方性质的详细配置文件吗?求大神告知9. Windows系统能否利用Docker使用Ubuntu吗?Ubuntu能使用本机的显卡吗?10. css3中translate(-50%,-50%)对 transform-origin的奇葩影响?

网公网安备