css - angular 加载的重复 div 可能有不同的内容，我怎样才能让它们自动调整高度？

Question

我的 nodejs/angularjs 应用程序通过 angular_controller 和 mongodb 自动加载一堆 div。

HTML:

<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
                <div class="individual_sunti">
                    <!--needs a unique div#id via angularz-->
                    <div class="sunti_content">{{sunti.content || 'content loading...'}}</div>
                    <div class="sunti_tags">{{sunti.tags || 'tags'}}</div>
                    <div class="sunti_author">{{sunti.author || 'author-placeholder'}}</div>
                    <div class="sunti_shortid">{{sunti.shortid}}</div>
                </div>
            </div>

我让他们共享同一个类(class):

.individual_sunti {
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0.05em solid orange;
    width: 30em;
    left: 50%;
    margin-left: -15em;
    min-height: 3em;
    height: auto
    display: block;
    background-color: hsla(360, 100%, 100%, 0.95);
}

.sunti_contain {
    width: 100%;
    display: block;
}

.sunti_content {
    height: auto;
    overflow: auto;

}


.sunti_tags {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: hsla(100, 100%, 50%, 0.5);
}

.sunti_author {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: hsla(130, 100%, 50%, 0.5);
}

.sunti_shortid {
    position: absolute;
    display: block;
    bottom: 1em;
    right: 0;
}

当有人使用页面上的表单发布一个模型时，Angular 会像这样用模型绑定(bind)填充它们:

$scope.submit_sunti = function() {
    socket.emit('post_new_sunti', {
        content: $scope.sunti.content,
        tags: $scope.sunti.tags,
        ancestor: $scope.sunti.ancestor
    })
    $scope.sunti.content = ""
    $scope.sunti.tags = ""
    $scope.sunti.ancestor = ""
}

基本上，无论如何，它们最终都具有相同的高度。有人建议使用 flexbox，我对它还不够熟悉，无法理解它在这里是如何工作的。 Angular 用行填充 HTML

ng-repeat="sunti in suntis" 带有可选的 track by $index 以防两者具有完全相同的内容(不太可能但可能)

.sunti_content

增长是因为它清楚地包含文本，但这是否意味着我需要唯一的 div id(如我的 html-comment-to-myslf-above 中)以确保每个生成的 sunti div 都有其自己的适当高度？

我怎样才能让 angular-populated-divs 比例适合它们的内容？是否可以仅通过 CSS 来“修复它”？

谢谢

Answer 1

您将高度硬编码为

height: 12em

这意味着您的 div 不会自动调整大小，只会默认为该高度