javascript - 使响应式容器在调整大小时与元素对齐

Question

我有一个包含恒定宽度元素的动态宽度容器 div。我希望能够调整容器的大小，以便它只显示整个元素，而不是将右侧的元素切成碎片。

JSFiddle

例如，用户的屏幕可能呈现显示 5 个元素:

如果该用户开始缩小屏幕宽度，一旦栏不再足够宽以容纳 5 个完整元素，我希望它缩小到仅显示 4 个元素。

差:

好:

我知道这可以通过使用 CSS3 媒体查询来实现，但我想避免为每个不同数量的元素编写不同的断点。我还想避免使用 javascript resize 事件处理程序，尽管我不确定如果没有它是否可行。

Answer 1

纯 CSS(一些限制)

此解决方案基于对 another solution for a similar problem I gave elsewhere 的修改.

Here is the fiddle.

它涉及重叠伪元素的复杂关系来创建边框，这可能导致解决方案对其中可能完成或可能无法完成的事情有一定的限制(复杂的背景也是一个问题)作为某些定位方面的必要条件)。然而，它在给定的情况下起作用。

一些解释

本质上，每个 .item 元素都使用 :after 和 :before 元素构建自己的顶部/底部边框部分，前者绑定(bind)到 .itemContainer，后者绑定(bind)到 .item 本身(:before 需要创建最后一位边框在行的末尾)。此外，:before 还创建了右边框的“灵活”位置，以在元素移出 View 时为其提供所需的响应能力。这就是为什么 :before 必须与 .item 本身相关，也是为什么每个 :after 元素的背景必须用于“隐藏” "前面的 :before 元素的右边框。

由于我们不知道通过 css 在任何给定点的“计数”关于哪个元素是显示中的“最后一个”，因此必须显示所有 :before 元素，但是我们不希望它们都具有正确的边框，因此 :after 需要覆盖它们。当一个元素向下移动到下一行时，它的 :after 不再覆盖现在已成为最后显示元素的右边框，显示该边框将用作整个组。

HTML(匹配您的原始 fiddle )

<div class="itemBar">
    <div class="itemContainer">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>     
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>     
    </div>
</div>

主要元素的 CSS

.itemBar {
    display: inline-block;
    width: 50%; /* some width can be set, does not need to be this */
}

.itemContainer {
    position: relative; /* :after pseudo-elements are positioned off this */
    z-index: 1; /* needed for pseudo-element interaction */
    overflow: hidden;
    display: inline-block;
    max-height: 68px;
    width: 100%;
    border-left: 1px solid black; /* left border is supplied by this */
}

.item {
    width: 60px;
    height: 62px;
    display: inline-block;
    margin: 2px;
    border: 1px solid black;
    /* NOTE: CANNOT be given positioning  */
}

伪元素的CSS

.item::after {
    content: '';
    position: absolute; /* will position off itemContainer */
    z-index: -1; /* push it to the background */
    top: 0; /* set it to top of itemContainer */
    bottom: 0; /* set it to bottom of itemContainer */
    margin-left: -100%; /* shove it past the far left edge of itemContainer */
    /* next, use padding to bring it back to its position at the end
       of the text string of .item */
    padding-left: 100%;
    /* next, add enough padding on the right to compensate for the right
       padding, right margin, and right border of .item */
    padding-right: 3px; 
    /* next, create the top and bottom border of "container", 
       in conjunction with the :before; so this is a pseudo-border for 
       .itemContainer being created by the .item elements */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: #fff; /* hide other :before borders */
}

.item:before { /* make right border */
    content: '';
    padding-top: 66px; /* give it .itemContainer height minus border heights */
    width: 100%;
    margin-top: -3px; /* .item top margin + border width */
    margin-left: -100%; /* pull the text in .item back into position */
    margin-right: 0;
      /* next, push this behind the background with an even lower z-index
        to hide it if it is not the right most element beign used to 
        form the right border */   
    z-index: -2;
    float: right; /* get the before element to the right */
    position: relative; /* needs to be adjusted in position */
    right: -4px; /* move it same as padding-right of the after element */
    display: block; /* give it a display */
      /*  next, use it to build the fake right border and also the fake
          final top/bottom borders of the of itemContainer */
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}