文章/答案/技术大牛

发布

社区首页 >问答首页 >Chrome在使用column-count时会在其容器中添加额外的空间

问Chrome在使用column-count时会在其容器中添加额外的空间
EN

Stack Overflow用户

提问于 2015-03-23 20:41:18

回答 2查看 142关注 0票数 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/

html

css

google-chrome

multiple-columns

column-count

回答 2

Stack Overflow用户

发布于 2015-03-23 21:53:13

这似乎与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高度的最低坐标。

票数 0

Stack Overflow用户

发布于 2017-08-02 23:42:08

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

我试着在我的商业网站的产品页面上模仿一种"Pinterest“风格，使用列，并在包装每个产品信息的div中添加一个box-shadow。当我这样做的时候，我意识到具有更大height的div错过了它底部的阴影(也许是css overflow: hidden;？)。

在这里搜索，我发现添加一个带有border: 5px solid transparent;的外部容器，用缺失的阴影包装div将创建一种可以正确显示阴影的“安全区”。这个技巧“原样”并没有解决这个问题，但是在这个包装的CSS属性brake-inside: avoid;中做了一些调整，而且根本没有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%;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29210478

复制

相似问题

问Chrome在使用column-count时会在其容器中添加额外的空间
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome在使用column-count时会在其容器中添加额外的空间EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome在使用column-count时会在其容器中添加额外的空间
EN