masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
css - Bagaimana untuk mencapai fungsi yang serupa tanpa menggunakan position:absolute
ringa_lee
ringa_lee 2017-05-15 17:01:22
0
3
1022


Tempat yang ditunjukkan dalam gambar ditulis dengan p. Kedudukan ditulis berdasarkan kedudukan mutlak Sekarang saya ingin menggunakan ng-repeat untuk mencapai berbilang bulatan (. jika lulus kembali Jika terdapat nilai yang relevan dalam data), kerana ng-repeat digunakan, ps ini perlu berkongsi css Jika kedudukan mutlak digunakan, semua kotak akan sesak bersama-sama.

ringa_lee
ringa_lee

ringa_lee

membalas semua(3)
漂亮男人
漂亮男人2017-05-15 17:03:22 Tingkat 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>
Suka +0
Tambah Balasan
伊谢尔伦
伊谢尔伦2017-05-15 17:03:22 Tingkat 2

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.

Suka +0
Tambah Balasan
左手右手慢动作
左手右手慢动作2017-05-15 17:03:22 Tingkat 1

Teka apa yang babi besar mahukan ialah float:left

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan