【问题标题】:Overflow hidden base on 1st column div possible? [duplicate]溢出隐藏在第一列 div 的基础上可能吗? [复制]
【发布时间】:2017-11-05 21:43:05
【问题描述】:

overflow: hidden; 是否可以基于第一列 div

我在引导程序中 排 带有 MySQL 内容的 div col-md-9 带有 MySQL 内容的 div col-md-3

我想根据第一列的数据调整这两列的高度。

如果第 2 列的数据多于第 1 列,则必须将第 2 列的数据切掉(例如overflow: hidden;),使其具有相等的列。

我现在的代码:

<div class="container-fluid">
<div class="row" style="display: flex;flex-wrap: wrap;">

<div class="col-md-9" style="display: flex;flex-wrap: wrap;">
MySQL data
</div>

<div class="col-md-3" style="display: flex;flex-wrap: wrap;">
MySQL data
</div>

</div>
</div>

【问题讨论】:

标签: twitter-bootstrap css flexbox


【解决方案1】:

ps。基于第一个数据列 hm:

jQuery(document).on("ready page:change", function() {

    setInterval(set_columns_height,500);
});

function set_columns_height(){
    var c1 = jQuery('.first_column').height();
    var c2 = jQuery('.second_column').height();

    if ( c1 != c2 ) {
        jQuery('.second_column').css('height',c1 + 'px');
    }
}

【讨论】:

  • 完美!非常感谢:)
  • @nickko 这是一个糟糕的解决方案,使用脚本间隔计时器一直在滴答作响并消耗资源。
  • 他总是可以在页面加载后使用它......但每0.5秒或1秒间隔一次......毫不夸张:)
  • 当存在比使用计时器更好的脚本解决方案时,它会成为一个非常糟糕的解决方案,最重要的是,既然使用 CSS 很容易解决这个问题,为什么还要使用脚本呢?
  • ps。同样,当您检查 javascript 与其他语言的性能测试时……这取决于浏览器,而 JS 并没有那么慢。为什么不在 CSS 中?也许在 CSS 中给出解决方案,不要只批评其他解决方案。我在我的网站上创建了许多间隔,它们工作正常...... CSS - CSS 上的动画也是非常“吃资源”,所以人们不应该使用它们? ...在 Firefox 中,他们甚至可以停止整个站点。最后一件事,JS 解决方案不隐藏内容而是显示它......溢出:隐藏在网站上看起来不太好,当然这取决于这些列的用途。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多