草庐IT

slide_left

全部标签

html - padding-left 和 padding-start 有什么区别?

在检查一些代码时,我发现了这个新声明:-webkit-padding-start但我无法理解与现有的padding-left有什么区别属性(property)。我已经阅读了MozillaDevelopers上的页面并创建了一个fiddle,但我仍然不确定。 最佳答案 除了-webkit-padding-start是非标准的,不同之处在于当书写方向是从右到左时,-webkit-padding-start将填充放在右(有效地,转换为padding-right)。如果该属性是标准化的,它将对旨在用于包含不同书写系统文本的文档的样式表很有用

html - 如何在不破坏包含元素高度的情况下在 div 中使用 "float: left"?

float的HTML元素似乎不会扩展其容器的高度。例如,考虑以下代码:.portfoliosite{background:#777;padding:10px;width:550px;}.portfoliothumbnail{background:red;margin:010px10px0;float:left;height:150px;width:150px;}AwesomeSite.ComAnawesomesiteIdid.ItlaunchedonJan1,2009请注意灰色背景的包含div比红色div短,并且红色div延伸到容器边界之外。我希望包含元素扩展到其内容的大小,包括flo

html - 溢出(滚动)以使用负 `left` 和 `top` 定位元素

允许可滚动溢出的元素从左侧和顶部负向定位的解决方法是什么?赞hereinexample(jsFiddle),只有3个红色方block可见,并且未切换滚动。虽然有6个正方形,但其中3个位于顶部的负方向。 最佳答案 我能想到的唯一方法是将正方形包裹在一个与它们高度相同的div中,并使用JQuery的scrollTop()方法:http://www.w3schools.com/jquery/css_scrolltop.asp但这也会在包装器div下面强制设置一个水平滚动条...简短的回答:没有纯CSS解决方案,并且定位它们绝对避免了此解决

jquery - 暂停滚动到下一个 'Slide' 直到所有动画完成

我正在为Skrollrslider创建一个“有限”的可视化构建器。它允许用户构建由幻灯片(htmlsection标签)组成的slider,这些幻灯片在页面上彼此相邻,每张幻灯片包含许多具有Skrollr数据属性/动画(关键帧?)的html元素。应用于他们。有没有办法暂停该幻灯片(前进到下一张幻灯片)直到其所有内部元素都完成其动画?我知道示例pausing.html演示了我需要的内容,但这些“幻灯片”已修复,这可能会给我的用户带来问题。slider将被放入大多数元素不固定的WordPress网站主题中。由于幻灯片内容如此动态且不可预测,因此很难知道锁定滚动多长时间?希望有可能做到这一点?

javascript - Owl Carousel 错误 : Sliding Entire Page On Mobile Safari - iPhone

所以我目前正在研究http://coin.codeclimb.com由于某种原因,主页上的OwlCarouselslider在iPhonesafari上不起作用。当我在iPhone上滑动时,它会滑动整个页面上的所有内容并破坏内容。我无法在桌面上复制问题。因此我无法使用开发工具来识别问题。就好像只有2张幻灯片时有15张幻灯片一样,它只是让你滑动,你滑动得越多,它就会将整个页面上的所有内容推得越远,包括导航。有什么想法吗?我在iPhone7Plus上使用Safari。 最佳答案 这里有几个问题:overflow-x:hidden不适用于

html - Firefox 中的 Padding Left 怪癖

http://jsfiddle.net/hERrX/input{padding:1%;}input#checking{padding-left:40px;}请在FIREFOX中检查以上链接并帮助我解决问题。它似乎在Chrome中运行良好。padding-left似乎不起作用,即使它具有更高的优先级。 最佳答案 如果您不使用%长度,它会起作用:http://jsfiddle.net/hERrX/15/input{padding:5px;}input#checking{padding-left:40px}我不知道为什么它不适用于%..我

html - 为什么我的图像背景在 float : left? 上消失

我想创建一个导航栏,两端都有图像,让它看起来很漂亮。因此,我创建了下面的HTML和CSS,并且效果很好。我的菜单项在ul/li列表中。当我设计列表样式以将所有元素放在一行时,两端的图像消失了。那是怎么回事?我该如何解决?罪魁祸首是float:left;下面。---测试.html---RegisterSigninSignout---测试.CSS---#container#header-usernav{background:url('http://www.webcredible.co.uk/i/bg-i-resources.gif');height:28px;background-repe

html - 使用像 .left {float :left} and . right {float:right} 这样的类好吗

哪种方法更易于管理特别是在团队发展方面?哪个会更优化更长?两者的优缺点是什么?样式表#firstblock{background:#000;float:left;}.genblock{background:#006699;float:left;}HTMLHowyoushoulddoit或者样式表.left{float:left;}#firstblock{background:#000;}.genblock{background:#006699;}HTML 最佳答案 您不应该泄漏表示信息(CSS)到您的数据层(HTML)。您应该为您的

html - 为什么我的转换 : scale() property move the image to the left?

我正在尝试制作一个使用CSS动画的图片库,但出现了一些奇怪的效果。我有一个较小的缩略图开始,当我将鼠标悬停在它上面时,我希望它缩放到两倍大小。该部分有效,但它也使它向左移动,并最终越过屏幕边缘。我应该怎么做才能修复它?.zoom{transition:1sease-in-out;}.zoom:hover{transform:scale(2);}ApaperplaneJSFIddleDemo 最佳答案 它没有向左移动。然而,左边的边缘在移动,右边也是。因为您的内容是左对齐的,所以它看起来向左移动。这个彩色演示很好地展示了这一点:.zo

html - CSS 过渡 : Border Slides Instead of Fading

我设计了一个链接,当你悬停它时,顶部会出现一个边框;当您将鼠标悬停在边界外时,边界将随着过渡消失。当您将鼠标悬停在边框上然后关闭时,边框会滑入而不是淡入。我希望边框淡入而不是滑动。我怎样才能做到这一点?这是一个JsFiddleHTMLTextCSSdiv{line-height:50px;width:100px;text-align:center;cursor:pointer;transition:border.2sease-in-out;-webkit-transition:border.2sease-in-out;-moz-transition:border.2sease-in-o