我使用column-count，但它看起來像我發現了一個錯誤，當一個元素有一個絕對位置，並從父項溢出。CSS中的列元素內部錯誤
#master {
column-count: 2;
}
.Books {
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
有兩個問題。其一，兩個紅色元素不平衡（見紫色線），其次紅色元素落在底部。
在.bookmarkAds類只需添加margin-top: -1px;。
and margin-top: 10px; in .books class。
#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>這是列計數工作的方式。將margin-top: 10px;添加到您的.Books課程中，問題將得到解決。像這樣：https://jsfiddle.net/x6ms3nxr/5/
紅色元素掉落到底部實際上是第二列的書籤的一部分，第二列被切割並轉到第一列。
關於列的一些額外的細節在瀏覽器支持可以在這裏找到： http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
是它似乎在第一列後，書籤保持不變。奇怪的 – Keith
margin-top：6px; ...添加...在.bookmarkAds .. class ... –