主页 / 问题 / 889763
Accepted
Kobets Matviy
Asked:2020-10-06 18:42:21 +0000 UTC2020-10-06 18:42:21 +0000 UTC

查找一行中的元素个数

  • 772

我在网站上有自适应广告卡（看图片）。 第一的 它们的数量和宽度取决于屏幕。
为此，我使用：以及相对于它们将拉伸display: flex; flex-grow: 1;
的钢材宽度。 在此处查看示例 ->自适应卡片width: 245px;

问题是当尺寸减小时，后续行中的元素变得不足，它们占据了整个块的宽度（看图）。 第二 它以红色显示的地方，它现在是如何伸展的。根据需要绿色。灰色，后续卡片的空白空间。我使用：flexbox、LESS 和媒体查询。
问题是：“如何使用 flex-wrap: wrap 属性获取一行中的项目数？！”
解决方案将从何而来：max-width: calc(100% / (количество элементов в ряде));

修正
确切感兴趣：“如何找出系列中的元素数量？”

css3

3 个回答

  1. 或者，媒体查询

    .partCard {
    flex-grow: initial;
    width: calc(33.333333% - 15px);
}
@media screen and (max-width: 767px) {
    .partCard {
        width: calc(50% - 20px);
    }
}
@media screen and (max-width: 460px) {
    .partCard {
        width: 100%;
    }
}

    我没有为 1920 定制它，如果这样可以解决问题，请写下 1920 的媒体查询

    • 2 
  2. .selector {
    width: 1080px;
    max-width: 100%;
}
    • 0
  3. Best Answer

    用jQuery解决了这个问题：

    function AdaptiveCards() {
    var rowWidth = $("row").width(); // ширина блока в котором лежат элементы
    var countItems = Math.floor(rowWidth / 260); // 245 - базовая ширина, относительно которой тянеться элемент + 15 маргины
    var itemWidth = Math.floor(rowWidth / countItems) - 15; // margin-right: 15px

    $(".partCard").css('max-width', itemWidth); // задаем ширину для элемента
} // обвертываем все в событие window.resize() для полной адаптивности
    • 0

相关问题