简体中文(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
965


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

ringa_lee
ringa_lee

ringa_lee

répondre à tous(3)
漂亮男人
漂亮男人2017-05-15 17:03:22 3 plancher

Merci pour l'invitation. En fait, vous devez toujours utiliser position:absoulte;
Zhang Xiaozhu a également répondu à la méthode ng-repeat qui peut changer la valeur en fonction des données, afin que le style rond puisse changer le. en haut et à gauche en fonction des changements de paramètres. Les valeurs ne seront pas regroupées.

J'ai écrit un exemple pour votre référence. 

<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>
Comme +0
Ajouter une réponse
伊谢尔伦
伊谢尔伦2017-05-15 17:03:22 2 plancher

Je ne comprends pas très bien ce que signifie la question. Puisqu'elle a été positionnée, les valeurs du haut et de la gauche peuvent naturellement être déterminées en fonction des données, atteignant ainsi l'objectif de créer des cercles à de nombreuses positions différentes.

Comme +0
Ajouter une réponse
左手右手慢动作
左手右手慢动作2017-05-15 17:03:22 1 plancher

Devinez ce que veut le gros cochon, c'est float:left

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！