- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个响应式 Owl Carousel (v2),每个元素或幻灯片都有一个图像,下面是一些可变长度的文本,请参见下图:
可以看出,无论有多少文本,所有图像都底部对齐到相同的基线。我通过将文本 div 设置为固定高度来完成此操作。问题是,如果只有一行文本,轮播下方就会出现不必要的空间。
如果我允许 div 设置自己的高度,我会得到:
所以我的图片不再排列了。
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
最佳答案
纯 HTML 和 CSS 不允许您根据 sibling 设置相同的高度。不过,使用一点 jquery 就可以实现这一点。
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
当我使用这样的东西时,我通常将变量 holder 移到脚本的开头。然后我在文档准备就绪时调用该函数。有时我什至会在窗口调整大小功能上调用它。如果您选择这样做,则必须在您的对象上调用 each 函数并将高度重置为自动,然后再调用均衡函数。
关于css - 旋转木马,在与同级元素的 div 高度相同的元素内创建一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40440944/
我正在尝试使此 OSX 代码(golfed 以便于讨论)在 Ubuntu Linux 上运行。 cat >main.c #include #include void provided_by_ma
带有 .next() jquery 方法的小选择器让我发疯。 故事是这样的,我在表行上使用 Bootstrap 过滤器和 jquery。当过滤器执行时,它会将显示样式属性更改为 table-row,如
无法理解为什么此代码将 DIV 元素的颜色更改为蓝色,但不更改 SPAN 元素的颜色。有什么想法吗? $(document).ready(function(){ $
这个问题在这里已经有了答案: How can I target a specific group of siblings in a flat hierarchy? (1 个回答) 关闭 6 年前。
请看here ,左侧的菜单应该在复选框选中的属性上滑入和滑出,但我的 CSS 不工作,任何人都可以帮助我。在我的代码菜单中,当前设置为 left:-240px,因为它应该滑入 left:0 选中复选框
我正在创建的这个系统遇到了问题。我总共有四个兄弟 div 容器。它们在普通桌面 View 中是这样的: 蓝红蓝红 这适用于 2/3 视口(viewport)以将 background-color 显示
使用 UITabBar,我有 4 个同级 View (每个选项卡项目一个)。加载应用程序时,第一个选项卡项目和 View 可见。第一个 View 有一个发布 NSNotification 的 IBAc
这个问题已经有答案了: Self-references in object literals / initializers (31 个回答) 已关闭 9 年前。 我有一个json结构如下:
我有多个带有标题、描述和号召性用语的产品。每个的字数没有规定。我正在使用 flexbox 来展示这些产品,这样每个元素的容器高度相等,并且可以轻松地清除到下一行,而不必弄乱第 nth-child。 我
我正在努力解决 IE7 问题。我希望我的兄弟 div 与其 sibling 的宽度相同。第一个 sibling 充当标题,而其他 sibling 有一定的尺寸。我可以使用一些建议。 http://js
我正在创建 3 行,每行有 4 列。但我想要实现的是,当 1 调整一行中任何列的大小时,其余列应根据行的总剩余宽度调整大小。假设如果行的总宽度为 100%,并且如果我将第一列的大小调整 60%,则剩余
到目前为止,我有以下cinoptions: cino= cino+=:0 cino+=g0 cino+=p0 cino+=(0 cino+={0 cino+=l1 cino+=t0 cino+=u2
如果我没有解释清楚,请提前道歉。我会尽力澄清我正在尝试做的事情。事不宜迟...假设您在页面上有一系列数字(仅由一个空格分隔),其中括号表示您所在的当前页面。 在页面上看起来是这样的: [1] 2 3
我的 parent 中有两个 sibling ,并且 sibling 的数据正在更新,数据已更新,但是 ngOnInit(){} 未调用。 https://stackblitz.com/edit/an
我正在创建一个可滑动的菜单,它可以正常工作,但有一个方面除外。我希望菜单始终具有 100% 的高度……无论用户在页面上向下滚动多远。但是,每当我将其设置为 height: 100%; 时,菜单都不会滑
first-child last-child first-child-1 last-chi
我想显示一个评论列表以及每个评论的评论列表等等: 这是我的 HTML 代码: Titre d'un commentaire statique Qui cum ven
我进行了彻底的搜索,但没有找到任何关于如何查询和检索多个 XML 同级的值的示例或指导。 有很多关于如何检索单个兄弟值的示例。 例如,给出以下 XML 片段: 800000 80000
这个问题已经有答案了: Is there a "previous sibling" selector? (33 个回答) 已关闭 7 年前。 在 CSS 中,如果同级元素位于输出中的上方(HTML 中
console.log((this).sibling('.advanceOptWrap')); 以上代码返回 Uncaught TypeError: $(...).sibling is not a f
我是一名优秀的程序员,十分优秀!