私はcolumn-countを使用しましたが、要素が絶対位置を持ち、親からオーバーフローしたときにバグが見つかりました。バグ内のCSS列要素
#master {
column-count: 2;
}
.Books {
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
2つの問題があります。 1つは、2つの赤い要素がバランスされていない（紫色の線を参照）、2番目は、赤い要素が下にドロップされています。
だけ.bookmarkAdsクラスでmargin-top: -1px;を追加します。
margin-top: 10px;.booksクラスである。
#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;
}<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>これは、列カウントが機能する方法です。 .Booksクラスにmargin-top: 10px;を追加すると、問題は解決されます。 https://jsfiddle.net/x6ms3nxr/5/
赤い要素が下にドロップされたのは、実際には、最初の列に切り捨てられた2番目の列のブックマークの一部です。列に関するいくつかの追加の詳細は、ブラウザでサポート
は、ここで見つけることができます： http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
ええ、最初の列の後に、ブックマークは同じままと思われます。 Strange – Keith
margin-top：6px; ...を追加しました.bookmark広告...クラス... –