个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的应用程序中，我遇到了一个问题，并通过以下演示重现了该问题: http://plnkr.co/edit/ftZSl0Cv6GY7WbaMMlhv?p=preview
我用了ng-repeat在 Angular 生成几个<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以相同的高度堆叠在同一水平面上。子级元素的相对位置可以根据内容的长度而变化。
最佳答案
在 li 上设置 vertical-align:top 因为 inline-block 默认是 vertical-align: baseline
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;
};
});/* 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;
}<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>关于html - css: li 元素在水平方向的奇怪和困惑的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41754723/
25
4
0
我有一个程序可以打开一个窗口并快速改变背景颜色并随机弹出矩形和椭圆形。我的代码有效，但我不知道为什么，因为我没有在我的代码中调用 repaint() 函数。当我使用我个人的 update() 函数包含
var allRapidSpells = $$('input[value^=RSW]'); 谁能告诉我这是做什么的？ 最佳答案 我敢猜测您正在使用 MooTools ，一个 JavaScript 框架
我有一个抽象父类，它有多个子类。我希望 child 能够拥有一个对于该 child 的每个实例都相同的变量。我不想将构造函数传递给 child 来告诉它它的名字，因为当它可以被硬编码时，这看起来很愚蠢
我刚刚在 Git 存储库上做了一些糟糕的事情，我不知道如何解决这个问题。我什至不知道我是怎么把它弄成这样的……! 在存储库(托管在 git hub 上)上，有 3 个我感兴趣的分支:master、br
我是 GIT 的新手，在理解提交日志图时遇到问题。 我感觉每条平行线都是一个分支。虽然我的源代码只有 2 个分支。我在下面提供的提交日志图中看到 3-4 条平行线(Microsoft Team Ser
我是 WPF 的新手，ScrollViewer 让我很沮丧。要么我只是没有“得到”它，要么它是一种有限的控制。 这是我的挫折: 水平滚动错误 水平滚动条仅在列表底部可见(我必须滚动到底部才能看到) 坏
那么 $('table.selectable td.capable input:text') 比 $('table.selectable td input:text') 更好吗？换句话说，指定一个类会
我刚刚完成了计算机图形学类(class)，我们必须对光线追踪器进行编程。尽管所有结果都是正确的，但我对 OpenMP 的使用感到困惑(顺便说一句，这不是类(class)的一部分)。我有这个循环(C++
与 PatternSynonyms ( explicitly bidirectional form )，pattern-to-expr 方程实际上形成了一个函数，但拼写为大写(假设您最终得到正确类型的
我是 javascript/coffeescript 新手。 有人可以解释一下为什么这个 CoffeeScript/JavaScript 会毫无延迟地快速通过吗？我对第一种情况的想法是，它是对 upd
如果我调用document.getElementsByClassName('cl')，我会得到一个 HTMLCollection。它似乎包含 Element 对象而不是 HTMLElement 对象，
这是我本月的 azure payasyougo 使用费用。 我很难理解为什么我要为标准中型应用服务付费，我认为它会包含在计算时间中？我只运行一个云服务，这对于一个没有做太多事情的云服务来说似乎有点陡峭
除了the issue I am already having之外，我还在I saw a video on it之后安装了HBase(尚未安装)之前，还安装了Zookeeper。在安装它时，我遇到了许
我正在将 XSLT 与 regexp:match exslt 函数一起使用。上述函数采用 JavaScript Regex 模式。因此，我尝试匹配一组数字 1 到 3 OR 5 到 7 OR 9 到
我想知道为什么这段代码会给出消息:SyntaxError:意外的标记其他。 var compare = function(choice1,choice2){ if(choice1===choice2)
我尝试使用复选框和 JQuery 过滤日历上的事件， $(document).ready(function () { $('.scrollable-menu :checkbox').click(f
假设我们有一个用户想要一个名为:“test/lasdhjal.txt”，无论如何。现在，如果我将其放入新的文件(输入)中；对象里面，它会认为 test/是一个文件夹，而它是名称的一部分。我能做什么呢？
问题是 stash 的更改不会留在我 stash 它们的分支中。其他分支存储将被覆盖示例: 我愿意: git checkout iss4 // made some changes gi
我是一个 java 新手，并且在 StackOverflow 错误/在类之间访问文件的能力方面遇到了一个非常令人困惑的问题。我知道根本原因可能是我进行了一些递归调用，但修复它的语法却让我无法理解。我认
public X createData(int n) { int[] values = new int[n]; Random rand = new Random(); for
我是一名优秀的程序员,十分优秀！