所以我在包含多个 span 标签的 p 标签上使用 -webkit-column-count。 每个跨度包含一个字母。
在 span 标签之间,还有一个可以拖动的 span,因此用户可以将其拖放到任何他想要的地方。
当用户将它放在 p 标签的边缘时,问题就开始了。
发生这种情况时,图像会被剪掉。
不知道为什么..
我看到的一件事是,当我从可拖动跨度中删除 z-index 时,它突然工作正常,但第二个可拖动跨度离开了它的位置。
请看JSFiddle的例子
这是我的 HTML 代码:
<div>
<p class="two_columns">
<span class="ui-draggable"> </span>
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus
<span class="ui-draggable"> </span>, utfacilisis ipsum posu ere eget. Cras
susciconsectetur adipiscing sdfsdf consectetur adipiscing sdfsdfdio.</p>
</div>
这是我的 CSS:
div {
width: 80%;
margin: 20px auto;
}
p {
overflow: visible !important;
margin: 0;
-webkit-column-count: 2;
}
.ui-draggable {
text-indent: -9999px;
display: inline !important;
z-index: 100;
cursor: pointer;
position: relative;
font-size: 0;
line-height: 0;
}
.ui-draggable::after {
position: absolute;
content: '';
width: 24px;
height: 30px;
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLBPLYyDEATQHLjBBl5UD-pSD9PI5rv_EAElcSPT7HGk2LKSKeAVkgCa-o") no-repeat;
cursor: pointer;
left: -10px;
top: -20px;
background-size: 100%;
}
最佳答案
你有一个绝对定位的 :after 伪类在你的 ui-draggable 类上。这将使图像 float 在所有内容之上(这就是绝对定位所做的, float 在现有布局之上)。
解决此问题的一种方法是为 ui-draggable 类添加边距以为图标腾出空间:
边距:0 15px 0 5px;
我还担心你为什么要使用这么多跨度,而大多数跨度根本没有样式。如果可以的话,考虑去除一些多余的部分。您拥有的 HTML 元素越少,通常就越容易让事物自行运行。
关于html - -webkit-column-count 给出了意想不到的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19908895/