Question

我有一个循环用ng重复div，每个div都有一个宽度和右边距，它们需要连续两个div，我的问题是我需要在每一行的底部有一个完整的行，而不是像现在如何休息，我该怎么做？

这是羽毛球：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'
  }]
})

Answer 1

在这里运行代码，这正是你想要的吗？

＆＃13;

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'
  }]
})

＆＃13;

.personBox {
  
  width: 45%;
  float: left;
  
}

.personBox div { 
  padding-left:20px; 
}

.personBox:nth-child(even) {
  margin-right: 0;
}

＆＃13;

<!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>

＆＃13;

快乐帮助！

Answer 2

我假设你想要从中心加入线条，如果那样的情况下移除了边距并使宽度达到50％

.personBox {

  width: 50%;
  float: left;
  margin-right: 0%;
  border-bottom:1px solid #000;

}

Answer 3

这很简单，我猜您正在使用 border-box 的大小调整，只需将其更改为：

.personBox {

  box-sizing: content-box;
  width: 40%;
  float: left;
  border-bottom:1px solid grey;

}

.personBox:nth-child(even) {
  padding-left: 10%;  
}

Css在每行的底部放置一个完整的行，并重复角度ng

3 个答案: