2

问题是，在 chrome 中，在最低的蓝色框的底部和容器的底部之间添加了额外的空间。到目前为止，找不到解决此问题的方法。在 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/

4

2 回答 2

0

这似乎与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。

工作小提琴

于 2015-03-23T13:53:13.240 回答
0

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

我尝试在我的商业网站中模拟一种“ Pinterest ”样式的产品页面，方法是使用列并添加一个包含每个产品信息的box-shadow列。div当我这样做时，我意识到div更大的height错过了它底部的阴影（css overflow: hidden;也许？）。

在这里搜索，我发现添加一个带有 a 的外部容器，border: 5px solid transparent;其中包含div缺少的阴影将创建一种“安全区”，可以正确显示阴影。这个提示“原样”并没有解决问题，但是在brake-inside: avoid;该包装的 CSS 属性中进行了一些调整，并且根本没有border，阴影被正确显示。作为副作用，当我对每个产品进行此修改时div，最后一个下方的多余空间消失了！！！我没有对此解决方案进行任何测试，因为这对我有用。因此，欢迎任何想要改进此方法的人。这是代码示例：

HTML

<div class="card-container">
<!--Card starting point-->
<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>
<!--Card ending point-->
</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%;
}
于 2017-08-02T15:42:07.843 回答