Question

这是我的jsfiddle问题演示：https://jsfiddle.net/icewind/w3ugftup/

＆＃13;

.col-wrapper {
    background-color: #efefef;
    color: #444;
    padding: 20px;
    border-radius: 5px;
    -webkit-column-width: 220px;
}
.remark{
    background-color: yellow;
    position: relative;
}
.remark:after{
    content: '.';
    position: absolute;
    bottom: -17px;
    left: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: red;
}

＆＃13;

<div class="col-wrapper">
    <p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p>
    <p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p>
    <p>A slight rustle, and the fugitive comes forth; a quick, sharp, resolute motion, and the cat has proved its usefulness. Let any one have a plague of rats and mice, as I <span class="remark">once</span> had, and let them be delivered therefrom by cats, as I was, and they will have a lasting and kind regard for them.</p>
    <p>A friend not long since informed me that a cat at Stone's Distillery was seen to catch two rats at one time, a fore foot on each. All the cats kept at this establishment, and there are several, are of the red tabby colour, and therefore most likely all males.</p>
</div>

＆＃13;

当我像演示一样使用css3列布局时，我为一个恰好位于列底部的单词添加书签，有时书签图标会被columb布局分成两部分。

我尝试使用＆＃39; break-inside：avoid;＆＃39;并且＆＃39; break-before：avoid;＆＃39; css规则，但似乎不起作用。

我的问题有解决方法吗？

Answer 1

不幸的是，'一次'这个词并不在同一条线上，但这是我所知道的唯一方法。拉力赛并不容易看看。

嗯，在 Html &nbsp中就是这样<span class="remark">once&nbsp</span>
对于.col-wrapper中的 Css ，您为浏览器兼容性添加-webkit-column-width: 220px; -moz-column-width: 150px; column-width: 150px;，并将填充更改为{ {1}}。
在备注中：{}更改后添加此代码{ padding:15px 27px 15px 27px; bottom: -7px; left: 1%; width: 33px; 的 height: 10px;

添加background: url("http://www.stat.ncsu.edu/dept-icons/camera-icon.gif") no-repeat center bottom;}

.col-wrapper > p {line-height: 19.5px;} .remark { background-color: yellow; position: relative; bottom: 4px;}

.col-wrapper { background-color: #efefef; color: #444; border-radius: 5px; -webkit-column-width: 220px; -moz-column-width: 150px; column-width: 150px; padding: 15px 27px 15px 27px; } .remark:after { content: '.'; bottom: -7px; left: 1%; width: 33px; height: 10px; position: absolute; background: url('http://www.stat.ncsu.edu/dept-icons/camera-icon.gif') no-repeat center bottom; } .col-wrapper > p { line-height: 19.5px; } .remark { background-color: yellow; position: relative; bottom: 4px; }

您可能需要根据小图标更改一些像素。如果您有任何疑问，请与我们联系。

Answer 2

这是非常有趣的CSS问题。我正在努力解决这个问题，我建议你暂时解决这个问题。我没有在底部显示书签，而是移到了顶部。

.remark:after{
    content: '.';
    position: absolute;
    top: -17px;
    left: 20%;
    width: 20px;
    height: 20px;
    display: block;
    background-color: red;
    opacity:.5;
}

CSS3列布局将一个元素分为两部分

2 个答案: