Question

问题是，在最低蓝色框的底部和容器底部之间添加了额外的空间。到目前为止，没有办法解决这个问题。在Firefox中运行良好。

.outer {
    -webkit-column-count: 3;
    margin: 0;
    padding: 0;
    background:orange;
    border:1px solid black;
}

.outer div {
    -webkit-column-break-inside:avoid;
    margin: 0;
    padding: 0;
    background:lightblue;
    border:1px solid black;
}

<!DOCTYPE html>

<html>
<body>

<div class="outer">

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </div>

     <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>test<br> </div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

</div>

</body>
</html>

有什么想法吗？

https://jsfiddle.net/t8nkpkm7/

Answer 1

这似乎与https://code.google.com/p/chromium/issues/detail?id=297782

有关

我没有看到CSS解决方案，但我想出了一个JavaScript解决方案：

var outer= document.querySelectorAll('.outer > div'),
    btm= 0;

[].forEach.call(outer, function(obj) {
  btm= Math.max(btm, obj.offsetTop + obj.offsetHeight);
});

document.querySelector('.outer').style.height= btm + 'px';

这会遍历所有.outer个孩子div以确定最低坐标，用于设置.outer的高度。

Working Fiddle

Answer 2

过去两天我一直在努力解决这个问题，我可能已经找到了解决这个问题的方法（至少在Chrome中，我注意到了这个问题）：

我尝试模仿某种＆＃34; Pinterest ＆＃34;通过使用列并将box-shadow添加到包含每个产品信息的div，我的商务网站中的产品页面的样式。当我这样做时，我意识到div height更大的css overflow: hidden;错过了它底部的阴影（border: 5px solid transparent;可能？）。

在这里搜索，我发现添加一个带有div的外部容器，其中包含缺少阴影的brake-inside: avoid;将创建一种＆＃34; 安全区 ＆＃34;阴影可以正确显示的地方。这个提示＆＃34; as-is ＆＃34;没有解决问题，但是在该包装的CSS属性border中进行了一些调整，并且根本没有div，阴影被正确显示。作为副作用，当我对每个产品HTML <div class="card-container">  <div class="safe-area"> <div class="floating-card"> <div class="floating-card-header card-item-4"></div> <div class="floating-card-body"> <div class="floating-card-title"> <h3>Title</h3> </div> <div class="floating-card-content"> <p class="smaller">Content Text</p> </div> </div> <div class="floating-card-footer"> <div class="thin-line"></div> <a href="" class="btn btn-info">Action</a> </div> </div> </div>  </div> CSS .card-container{ -webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; -o-column-gap: 20px; column-gap: 20px; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ -moz-page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ } .floating-card{ margin-bottom: 20px; border-width: 0px; border-style: solid; border-radius: 5px; background-color: white; box-shadow: 0px 3px 4px #aaa; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ -moz-page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ } .safe-area{ -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ -moz-page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ } .floating-card p.smaller{ font-size: medium !important; } .floating-card-header{ background-size: cover; background-repeat: no-repeat; border-radius: 5px 5px 0 0; height: 25vh; } .floating-card-body, .floating-card-footer{ margin: 0px 10px; } .floating-card-title h3{ font-weight: bold; } .floating-card-footer > a{ margin: 3% 25%; width: 50%; }进行修改时，最后一个产品下方的额外空间消失!!! 我没有对此解决方案进行任何更多测试因为这对我有用。因此，欢迎任何想要改进这种方法的人。以下是代码示例：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@drawable/transparent"
    android:elevation="0dp"
    android:translationZ="0dp"
    app:menu="@menu/navigation" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:clickable="true"
    android:elevation="16dp"
    android:fitsSystemWindows="true"
    android:focusable="true"
    android:translationZ="16dp"
    android:layout_alignBottom="@id/navigation"
    android:layout_centerHorizontal="true"
    app:rippleColor="@color/colorPrimaryDark"
    app:srcCompat="@drawable/main_menu_timeline_icon" />

使用列计数时，Chrome会为其容器添加额外空间

2 个答案: