Question

我使用了column-count，但是当一个元素具有绝对位置并且从父级溢出时，我发现了一个错误。

#master {
    column-count: 2;
}

.Books {
    display: table;
    column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

JSFiddle

有两个问题。一，两个红色元素不平衡（见紫色线），第二个，红色元素落在底部。

Answer 1

这是列计数的工作方式。将margin-top: 10px;添加到您的.Books课程中，问题将得到解决。像这样：https://jsfiddle.net/x6ms3nxr/5/

红色元素掉到底部实际上是第二列书签的一部分，它被剪切并转到第一列。

有关浏览器中列支持的一些其他详细信息，请访问： http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

Answer 2

只需在margin-top: -1px;课程中添加.bookmarkAds。

margin-top: 10px;等级.books。

＆＃13;

#master {
    column-count: 2;
}

#rule {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #9C27B0;
    top: 7px;
    left: 0;
}

.Books {
    width: 100%;
    font-family: tahoma;
    font-size: 12px;
    border: 1px solid #ddd;
    line-height: 150%;
    background: #FFFFF6;
    float: right;
    box-sizing: border-box;
    padding: 5px 5px 10px 5px;
    margin: 3px;
    margin-top: 10px;
    position: relative;
    display: table;
    column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    min-height: 200px;
}

.bookmarkAds {
    margin-top: -1px;
    position: absolute;
    left: 4px;
    color: #9e9e9e;
    cursor: pointer;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
    top: -10px;
    font-size: 22px;
    background: red;
}

＆＃13;

<div id="rule"></div>

<div id="master">
    <div class="Books">
          <div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
          Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.

    </div>
    <div class="Books">
        <div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
        Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
        Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
    </div>
</div>

＆＃13;

bug

2 个答案: