- 首页
- 前端开发
- 如何从卡片或类似内容中获取标题以与弹性框具有相同的高度?
如何从卡片或类似内容中获取标题以与弹性框具有相同的高度?
[英] How to get header from cards or similar to have the same height with flex box?
本文介绍了如何从卡片或类似内容中获取标题以与弹性框具有相同的高度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请不要黑客
没有硬编码.这个想法不是针对一种情况解决它，例如对于有 4 列的情况，但要针对动态内容和响应式屏幕尺寸解决此问题.
给我的问题是它基本上不是直接的孩子，而是它的内容
这里的代码笔:
解决方案
基本上有 2 种方式来实现，CSS 方式，
和脚本方式，这里使用jQuery.
<小时>
第一个脚本示例展示了如何为所有项目设置相等的高度.
第二个样本为每行设置相等的高度，实现此目的的方法是检查项目的最高值(它会为新行更改)并为每个处理的范围/行设置高度.
我还添加了一些优化、预加载项目，因此如果只有 1 个项目或列，它就不会处理它们.
<小时>
更新代码笔 1
堆栈片段 1
(function ($) {//预加载对象数组以获得性能var $headers = $('.header')//在调整大小时运行$( 窗口 ).resize(function() {$.fn.setHeaderHeight(0);});$.fn.setHeaderHeight = 函数(高度){//重置为自动，否则我们无法检查高度$($headers).css({ 'height': 'auto' });//获取最高值$($headers).each(function(i, obj) {height = Math.max(height, $(obj).outerHeight())});//设置高度$($headers).css({'height': height + 'px' });}//加载时运行$.fn.setHeaderHeight(0);}(jQuery));
body{填充:20px；}.物品{高度:100%；padding-right: 20px;填充顶部:20px；显示:弹性；flex-direction: 列}.header{背景颜色:矢车菊蓝；}.内容{背景颜色:鲑鱼；弹性增长:1；}.mycontainer{最大宽度:500px；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/><div class="row mycontainer"><div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">哦，不，这个头文件被包裹了</div><div class="content">一些内容啦啦 </div>
<小时>更新的 codepen 2
堆栈片段 2
(function ($) {//预加载对象数组以获得性能var $headers = $('.header')//仅当项目超过 1 项时才执行此操作如果($headers.length <2){ 返回；}//在调整大小时运行$( 窗口 ).resize(function() {$.fn.setHeaderHeight(0,0);});$.fn.setHeaderHeight = 函数(高度，idx){//重置为自动，否则我们无法检查高度$($headers).css({ 'height': 'auto' });$($headers).each(function(i, obj) {//只有在多于 1 列时才继续如果 ($($headers).eq(0).offset().top !== $($headers).eq(1).offset().top ) {返回假；}//获取最高值height = Math.max(height, $(obj).outerHeight())//是否改变了最高值或者我们是最后一项if (i != 0 && $($headers).eq(i - 1).offset().top != $(obj).offset().top) {//设置行高$($headers).slice(idx, i).css({ 'height': height + 'px' });//重置高度和起始索引高度 = 0;idx = i;} else if ($headers.length - 1 == i) {//最后一行$($headers).slice(idx, i + 1).css({ 'height': height + 'px' });}});}//加载时运行$.fn.setHeaderHeight(0,0);}(jQuery));
body{填充:20px；}.物品{高度:100%；padding-right: 20px;填充顶部:20px；显示:弹性；flex-direction: 列}.header{背景颜色:矢车菊蓝；}.内容{背景颜色:鲑鱼；弹性增长:1；}.mycontainer{最大宽度:500px；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/><div class="row mycontainer"><div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">哦，不，这个头文件被包裹了</div><div class="content">一些内容啦啦 </div>
<小时>由于有些人更喜欢普通的 javascript，我也更新了这样的示例(在所有项目上设置相等的高度)，它使用计算的 height 值动态应用/添加一个类.
堆栈片段
(function(d,t,h) {/* 预加载一些变量 */h = (d.head || d.getElementsByTagName('head')[0]);var items = d.querySelectorAll('.header');功能调整大小(){var 高度 = [], i = 0, css;/* 删除设置样式，以便我们获得正确的值 */removeElement('head_dynamic_css');for (i = 0; i < items.length; i++) {heights.push(parseFloat(window.getComputedStyle(items[i], null).getPropertyValue("height")));}css = ".header { height: " + Math.max.apply(null, heights) + "px; }";/* 创建和添加具有高度的样式 */var s = d.createElement('style');s.type = '文本/css';s.id = 'head_dynamic_css';如果(s.styleSheet){s.styleSheet.cssText = css} 别的 {s.appendChild(d.createTextNode(css));}h.appendChild(s);}window.addEventListener("load", resized, false);window.addEventListener("resize", resizer, false);函数调整器(){如果(！t){t = setTimeout(function() {t = 空；调整大小()；}, 66);}}函数 removeElement(el) {var el = document.getElementById(el);如果 (el) {el.parentElement.removeChild(el);}}}(document,null));
body {填充:20px；}.物品 {高度:100%；padding-right: 20px;填充顶部:20px；显示:弹性；flex-direction: 列}.header {背景颜色:矢车菊蓝；}.内容 {背景颜色:鲑鱼；弹性增长:1；}.mycontainer {最大宽度:500px；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/><div class="row mycontainer"><div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦 </div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">bippo</div><div class="content">一些内容啦啦一些内容啦啦一些内容啦啦</div>
<div class="col-12 col-md-4 col-lg-3"><div class="item"><div class="header">哦，不，这个头文件被包裹了</div><div class="content">一些内容啦啦 </div>
No hacks please
no hard coding. The idea is not solving it for one case, e.g. for the case that there is 4 columns, but solving it for dynamic content and for responsive screen sizes.
The problem to me is that it is basically not direct children, but the content of it
codepen here:
https://codepen.io/anon/pen/OxzrzV
HTML
<h1>disclaimer: resize the window. Make the blue headers in a row match height</h1>
<div class="row mycontainer">
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">oh no this header wraps</div>
<div class="content">some content lala </div>
</div>
</div>
</div>
CSS
body{
padding: 20px;
}
.item{
height: 100%;
padding-right: 20px;
padding-top: 20px;
display: flex;
flex-direction: column
}
.header{
background-color: cornflowerblue;
}
.content{
background-color: salmon;
flex-grow: 1;
}
.mycontainer{
max-width: 500px;
}
what do I want?
the blue headers to always have the same size like all elements in the current row.
a solid jquery solution is fine too... but it must be fool proof and work on resize as well. General change of structure of html is fine too. But must be responsive right.
so this (achieved by hard coding and not responsive):
解决方案
There are basically 2 ways to accomplish this, the CSS way,
and the script way, here using jQuery.
The first script sample shows how to set equal height on all items.
Second sample set equal height per row, and the way to make that work is to check the item's top value (it changes for a new row) and set the height for each processed range/row.
I also added a couple of optimizations, preload items and so it won't process them if there is only 1 item or column.
Updated codepen 1
Stack snippet 1
(function ($) {
// preload object array to gain performance
var $headers = $('.header')
// run at resize
$( window ).resize(function() {
$.fn.setHeaderHeight(0);
});
$.fn.setHeaderHeight = function(height) {
// reset to auto or else we can't check height
$($headers).css({ 'height': 'auto' });
// get highest value
$($headers).each(function(i, obj) {
height = Math.max(height, $(obj).outerHeight())
});
// set the height
$($headers).css({ 'height': height + 'px' });
}
// run at load
$.fn.setHeaderHeight(0);
}(jQuery));
body{
padding: 20px;
}
.item{
height: 100%;
padding-right: 20px;
padding-top: 20px;
display: flex;
flex-direction: column
}
.header{
background-color: cornflowerblue;
}
.content{
background-color: salmon;
flex-grow: 1;
}
.mycontainer{
max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<div class="row mycontainer">
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">oh no this header wraps</div>
<div class="content">some content lala </div>
</div>
</div>
</div>
Updated codepen 2
Stack snippet 2
(function ($) {
// preload object array to gain performance
var $headers = $('.header')
// only do this if there is more than 1 item
if ($headers.length < 2) { return; }
// run at resize
$( window ).resize(function() {
$.fn.setHeaderHeight(0,0);
});
$.fn.setHeaderHeight = function(height, idx) {
// reset to auto or else we can't check height
$($headers).css({ 'height': 'auto' });
$($headers).each(function(i, obj) {
// only continue if there is more than 1 column
if ($($headers).eq(0).offset().top !== $($headers).eq(1).offset().top ) {
return false;
}
// get highest value
height = Math.max(height, $(obj).outerHeight())
// did top value changed or are we at last item
if (i != 0 && $($headers).eq(i - 1).offset().top != $(obj).offset().top) {
// set height for row
$($headers).slice(idx, i).css({ 'height': height + 'px' });
// reset height and startIndex
height = 0;
idx = i;
} else if ($headers.length - 1 == i) {
// last row
$($headers).slice(idx, i + 1).css({ 'height': height + 'px' });
}
});
}
// run at load
$.fn.setHeaderHeight(0,0);
}(jQuery));
body{
padding: 20px;
}
.item{
height: 100%;
padding-right: 20px;
padding-top: 20px;
display: flex;
flex-direction: column
}
.header{
background-color: cornflowerblue;
}
.content{
background-color: salmon;
flex-grow: 1;
}
.mycontainer{
max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<div class="row mycontainer">
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">oh no this header wraps</div>
<div class="content">some content lala </div>
</div>
</div>
</div>
As some prefer plain javascript, I updated with such sample as well (setting equal height on all items), which apply/add a class dynamically, with the computed height value.
Stack snippet
(function(d,t,h) {
/* preload some variables */
h = (d.head || d.getElementsByTagName('head')[0]);
var items = d.querySelectorAll('.header');
function resized() {
var heights = [], i = 0, css;
/* delete set style so we get proper value */
removeElement('head_dynamic_css');
for (i = 0; i < items.length; i++) {
heights.push(parseFloat(window.getComputedStyle(items[i], null).getPropertyValue("height")));
}
css = ".header { height: " + Math.max.apply(null, heights) + "px; }";
/* create and add style with height */
var s = d.createElement('style');
s.type = 'text/css';
s.id = 'head_dynamic_css';
if (s.styleSheet) {
s.styleSheet.cssText = css
} else {
s.appendChild(d.createTextNode(css));
}
h.appendChild(s);
}
window.addEventListener("load", resized, false);
window.addEventListener("resize", resizer, false);
function resizer() {
if (!t) {
t = setTimeout(function() {
t = null;
resized();
}, 66);
}
}
function removeElement(el) {
var el = document.getElementById(el);
if (el) {
el.parentElement.removeChild(el);
}
}
}(document,null));
body {
padding: 20px;
}
.item {
height: 100%;
padding-right: 20px;
padding-top: 20px;
display: flex;
flex-direction: column
}
.header {
background-color: cornflowerblue;
}
.content {
background-color: salmon;
flex-grow: 1;
}
.mycontainer {
max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<div class="row mycontainer">
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">bippo</div>
<div class="content">some content lala some content lala some content lala </div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div class="item">
<div class="header">oh no this header wraps</div>
<div class="content">some content lala </div>
</div>
</div>
</div>
这篇关于如何从卡片或类似内容中获取标题以与弹性框具有相同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
