在高度上平均分配列表项 (jQuery/CSS)

Question

我有一个具有 div 网格的响应式网站。

当我打开页面或调整浏览器的宽度时，这些 div 会自动调整大小以适应浏览器的宽度。随着宽度的变化，它们的高度也会发生变化，以保持纵横比。

第一个 div 嵌入了一个由多个列表项组成的无序列表（以 "inline-block" 样式垂直显示）。

如前所述，根据浏览器的宽度（当页面刷新或调整大小时），第一个 div 将自动调整其高度。我想知道的是如何自动且均等地更改这些列表项的高度（或行高、填充或边距），以便列表始终垂直填充整个 div.

重要的是要知道列表项的数量因页面而异。它在页面打开时作为变量给出，但脚本应该能够工作，无论项目数量如何。

这就是我对 jQuery 所做的（使用 php 变量）。

var dW=$(".mydiv").width();
var dH=$(".mydiv").height();
var liNum= <?php echo $how_many_li; ?>; 
var verticalSpace=  (dH / liNum) * 100;
verticalSpace= Math.round(verticalSpace) / 100;
$('.myListblock li a').css('line-height',verticalSpace+'px');
$('.myListblock').css('width',dW);
$('.myListblock').css('height',dH);

它有点管用，但有点乱，因为有时看起来不错，但有时却不行。 70% 的时间它没问题，看起来不错，但有时列表会超出 div 的限制，有时列表只占它的 2/3。

所以，我想知道是否有更多 predictable/efficient/simple 的方法来实现我想要的（纯 CSS 会很完美，但我不知道是否可能）。

谢谢。

Answer 1

我认为您只能使用 CSS 来做到这一点。我不是 100% 确定跨浏览器兼容，但它在 Chrome 中工作（现在我尝试使用其他浏览器进行测试）。

HTML

<div class="main-wrapper">
    <ul class="myListblock">
        <li class="mydiv"><a href="#">div a</a></li>
        <li class="mydiv"><a href="#">div b</a></li>
        <li class="mydiv"><a href="#">div c</a></li>
        <li class="mydiv"><a href="#">div d</a></li>
        <li class="mydiv"><a href="#">div e</a></li>
    </ul>
</div>

CSS

.myListblock{
    display:table;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.myListblock li{
    display:table-row;
}

.myListblock li a{
    display:table-cell;
    vertical-align:middle;
}

但是，.myListblock必须定义height。

工作示例：http://jsfiddle.net/Frogmouth/czLgs9pu/

在高度上平均分配列表项 (jQuery/CSS)

Equally distribute list items in height (jQuery/CSS)

jquery

height

listitem

window-resize

HTML

CSS