我有一个 ng repeat over div 的循环，每个 div 都有宽度和边距，它们需要连续两个 div，我的问题是我需要在每一行的底部都有一个完整的行，不像break 现在怎么样了，我该怎么做？
这是 plunker:http://plnkr.co/edit/IGYwgVOhc1eJ24UqROgZ?p=preview
<div ng-repeat="person in persons" class="personBox">
<p>{{person.name}}</p>
</div>
.personBox {
width: 45%;
float: left;
margin-right: 10%;
border-bottom:1px solid #000;
}
.personBox:nth-child(even) {
margin-right: 0;
}
app.controller('testCtrl', function($scope) {
$scope.persons = [{
name: 'avi'
}, {
name: 'tom'
}, {
name: 'john'
}, {
name: 'ben'
}, {
name: 'ben2'
}, {
name: 'ben3'
}, {
name: 'ben4'
}, {
name: 'ben5'
}]
})
最佳答案
在这里运行代码，这正是您想要的吗？
var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
$scope.persons = [{
name: 'this is some really long text in some way'
}, {
name: 'this could also be a long text in some way'
}, {
name: 'john'
}, {
name: 'ben'
},
{
name: 'ben2'
},
{
name: 'ben3'
},
{
name: 'ben4'
},{
name: 'ben5'
}]
}).personBox {
width: 45%;
float: left;
}
.personBox div {
padding-left:20px;
}
.personBox:nth-child(even) {
margin-right: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="testCtrl">
<div ng-repeat="person in persons" class="personBox">
<div>{{person.name}}</div>
<hr/>
</div>
</body>
</html>帮助愉快!
关于javascript - Css 在每一行的底部放置一个完整的行，带有 Angular ng 重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28984021/