为什么我的div表现得像我指定的厘米和半边缘 - 顶部/边缘底部?

时间:2014-06-19 17:24:36

标签: javascript html css angularjs margin

我正在使用AngularJS应用并遇到不需要的空白。

<div class='user' ng-repeat='session in sessions'>
    <div class='text' ng-bind='monologues[session][0]'></div>
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
</div>

我指定div.user的最小高度(使用jQuery动态计算),div.text或div.timestamp没有高度或余量。 Chrome的元素检查器似乎没有为div.text或div.timestamp提供任何边距或最小高度。手动为div.user指定零边距和最小高度:

   <style type="text/css">
        div.user
            {
            overflow-y: auto !important;
            white-space: pre-wrap;
            }
        div.user div
            {
            margin: 0;
            min-height: 0;
            }
        input[type='text']
            {
            width: 100%;
            }
        textarea
            {
            width: 100%;
            height: 150px;
            }
    </style>

该页面使用H5BP CSS,但是对该文件中的包含进行注释不会将两个内部div的边距更改为div.user。

还有其他事情可能会给我带来不必要的保证金行为吗?

1 个答案:

答案 0 :(得分:2)

您的white-space: pre-wrap;导致了问题

请参阅http://jsfiddle.net/GVTr2/

现在用它

http://jsfiddle.net/GVTr2/1/

我不知道你为什么需要它,但至于你的问题,这就是原因

div.user {
    overflow-y: auto !important;
}

如果您真的想保留它,那么您可以将html放在一行中,如下所示

<div class='user' ng-repeat='session in sessions'><div class='text' ng-bind='monologues[session][0]'>asfafd adsfds</div><div class='timestamp' ng-bind='monologues[session][1] | to_locale'>sdf sdf as</div></div>

OR

http://jsfiddle.net/GVTr2/2/

为您的父级定义font-size: 0,并为子级定义font-size。这不是理想的做事方式,因为这可能会非常麻烦。

我认为最好的方法是不要使用预包装