Question

<div style="height: 480px;">
    <!-- active and same padding -->
    <div>item 1</div>
    <!-- active and same padding -->
    <div>item 2</div>
    <!-- active and same padding -->
    ...
    <!-- active and same padding -->
    <div>item n</div>
    <!-- active and same padding -->
</div>

我有静态高度，所有物品都有高度。但物品的数量不是静态的。我有JS的功能。

var padding = ( parentHeight - itemHeight * length ) / ( length + 1 );
var css = {
    paddingBottom: padding,
    paddingTop: $index ? 0 : padding
};

我可以使用CSS解决方案吗？

Answer 1

设置每个项目的高度 -

<div class="outer">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    ...
</div>

CSS -

.outer div {  
    height: 480px;
}

如果您还想使用最小高度尺寸 -

.outer {
    min-height:480px;
}

更新：

.outer {
    padding :  40px 0 ; 
}

更新2：

使用 -

.outer div {  
    padding :  40px 0 ; 
}

通过CSS对相同高度的项目进行垂直对齐和自动填充

1 个答案: