4

我得到了一个用 HTML/CSS 创建的设计，我认为这可能是不可能的，但在我承认失败并做出妥协之前，我想绝对确定。

许多包含可变长度文本的项目被排列成两组，这样它们形成列，其中列精确地分布在可用宽度上，但确保每列不比其最宽的项目宽。因此，它尽可能有效地使用水平空间，同时仍确保项目完美对齐为网格。考虑这个例子 -

[-a--] [-cccccc-] [-eee-] [-g---]
[-bb-] [-dddd---] [-ff--] [-hhh-]

也许这看起来像表格，但考虑到当容器缩小时这些项目也必须包装，并且列仍然保持它们的神奇对齐 -

[-a---] [-cccccc-] 
[-bb--] [-dddd---] 
[-eee-] [-g------]
[-ff--] [-hhh----]

我不知道如何解决宽度的递归依赖性。也就是说，每个“列”的宽度由该列中最长的项目定义，但总可用宽度是已知的，并且必须是列宽度的精确总和。

我很高兴使用仅 CSS3 的解决方案，回退到旧浏览器的固定项目宽度解决方案，但我完全不知道什么 CSS 属性可以实现这种魔力。

只是为了提供某种起点，这是一个使用 CSS3 列的 Codepen：http ://codepen.io/anon/pen/kiGgp

这不好，因为列分布均匀，我想知道是否有办法以最佳方式分布它们。

4

1 回答 1

0

即使在多次尝试使用 FlexBox 模型后，我也无法实现您指定的目标。（顺便说一句：目前浏览器对这个模型的支持很差）

但是，在我的努力下，我提出了一个不错的解决方案，也许你也会喜欢它。

这个小提琴中的演示

我已经设法在每行中的元素之间平均分配空间，同时允许元素换行。每个元素都得到他需要的确切空间量，其余的被划分为row 内的空间。

但是，即使元素换行，这个宽度仍然存在。所以你没有'Column like'显示。

这是纯 CSS 和跨浏览器。 测试： IE10、IE9、IE8、Chrome、FF

HTML

<div class="wrap">
    <div class="pair">
        <p>a</p>
        <p>b</p>
    </div>
    <div class="pair">
        <p>cccccccc</p>
        <p>dddddd</p>
    </div>
    <div class="pair">
        <p>ee</p>
        <p>f</p>
    </div>
    <div class="pair">
        <p>ggggggggggg</p>
        <p>hhhhhhhhh</p>
    </div>
    <div class="pair">
        <p>iiii</p>
        <p>jjjjjj</p>
    </div>
    <div class="filler"></div>
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
.wrap
{
    background-color: #ccc;
    line-height: 0;
    text-align: justify;
}

.pair
{
    line-height: normal;
    background-color: #ddd;
    display: inline-block;
    width: auto;
}

.filler
{
    width: 100%;
    height: 0;
    font-size: 0;
    display: inline-block;
    vertical-align: top;
}
于 2013-09-16T14:04:30.707 回答