Question

在我的应用程序中，我遇到了一个问题，并使用以下演示进行了再现： http://plnkr.co/edit/ftZSl0Cv6GY7WbaMMlhv?p=preview

我在角度中使用了ng-repeat来生成<li>元素中的多个<ul>元素。在每个<li>中，结构如下：

<ul class="articlelist">
  <li class="articleitem" ng-repeat="eacharticle in main.articlelist">
    <p class="article-title ellipsis-threelines-new">{{eacharticle.title}}</p>
    <img class="lead-image" src="http://placekitten.com/g/200/300">
    <div><a>www.abc.com</a></div>
  </li>
</ul>

子级中有p，img和div元素

li元素的样式如下，只需将它们设置为inline-block元素，因此它们将水平堆叠。

.articlelist {
  list-style:none;
}

.articleitem {
display: inline-block;
width:25%;
background: white;
border: 1px solid rgb(220,220,224);
height:280px;
}

.lead-image {
width:100%;
margin: 0 0 10px 0;
height: 50%;
}

.article-title {
font-size:19px;
color: #313131;
padding:10px;
font-style: normal;
font-weight: 600;
font-family: serif; 
margin: 0;
word-wrap: break-word;
}

我将每个li元素的固定高度设置为280px。 p的内容逐一变化。所以p的高度也不同。最终结果如下：

这正是我在实际应用中得到的。我很困惑为什么元素以这种方式对齐。我期望的效果是每个li堆叠在相同的水平高度和相同的高度。次级元素的相对位置可以根据内容的长度而变化。

Answer 1

在vertical-align:top上设置li，因为inline-block默认为vertical-align: baseline

＆＃13;

var app = angular.module('myapp', []);

app.controller('MainCtrl', function() {
  var self = this;
  this.articlelist = [];

  this.addItem = function() {
    for (var i = 1; i <= 3; i++) {
      var temp = {};
      temp.title = self.generateTitle(i);
      self.articlelist.push(temp);
    }
  };

  this.generateTitle = function(counter) {
    var title = "";
    for (var i = 0; i < counter * 5; i++) {
      title = title + "A";
    }
    return title;
  };
});

＆＃13;

/* Put your css in here */

.articlelist {
  list-style: none;
}
.articleitem {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  background: white;
  border: 1px solid rgb(220, 220, 224);
  height: 280px;
}
.lead-image {
  width: 100%;
  margin: 0 0 10px 0;
  height: 50%;
}
.article-title {
  font-size: 19px;
  color: #313131;
  padding: 10px;
  font-style: normal;
  font-weight: 600;
  font-family: serif;
  margin: 0;
  word-wrap: break-word;
}

＆＃13;

<html ng-app="myapp">
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
  <body ng-controller="MainCtrl as main">        
    <button ng-click="main.addItem()">Add New One</button>
    <ul class="articlelist">
      <li class="articleitem" ng-repeat="eacharticle in main.articlelist">
        <p class="article-title ellipsis-threelines-new">{{eacharticle.title}}</p>
        <img class="lead-image" src="http://placekitten.com/g/200/300">
        <div><a>www.abc.com</a></div>
      </li>
    </ul>
  </body>
</html>

＆＃13;

css：li元素在水平方向上的奇怪和混乱布局

1 个答案: