-webkit-column-count给出了意想不到的结果

时间:2013-11-11 14:35:33

标签: html css css3 webkit multiple-columns

所以我在包含多个span标签的p标签上使用-webkit-column-count。 每个跨度包含一个字母。

在span标签之间,还有另一个可拖动的跨度,因此用户可以将其拖放到任何他想要的位置。

当用户将其放在p标签的边缘时,问题就开始了。

当它发生时,图像会被剪切掉。

不知道为什么......

我看到的一件事是,当我从可拖动的跨度中移除z-index时,它突然工作正常,但第二个可拖动的跨度从它的位置开始。

请查看JSFiddle

的示例

这是我的HTML代码:

<div>
<p class="two_columns">
<span class="ui-draggable">&nbsp;</span>
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf 
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus
<span class="ui-draggable">&nbsp;</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%;
}

1 个答案:

答案 0 :(得分:0)

你有一个绝对的定位:在ui-draggable类上伪后。这将使图像浮动在所有东西之上(这就是绝对定位所做的,漂浮在现有布局之上)。

解决这个问题的一种方法是为ui-draggable类添加一个边距,为图标腾出空间:

margin: 0 15px 0 5px;

我也担心为什么你使用这么多跨度,因为大多数人根本没有造型。如果可以,请考虑去掉一些多余的东西。您拥有的HTML元素越少,通常就越容易使事情发生。