- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站方向(正文中的属性)是 RTL。当我尝试实现 FlexSlider 时,它导致 div 为空白。像这样 -
但是,如果我只是从正文中删除 RTL 属性,那么它的排列非常完美,如下所示: arrange fine
问题是我怎样才能绕过它?我只是想不通..我尝试更改 Flex css 但还是不行..这是CSS:
/*
* jQuery FlexSlider v2.2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
font-family: 'flexslider-icon';
src:url('fonts/flexslider-icon.eot');
src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; text-align:right;direction:rtl;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 232px;
height: 118px;
margin: 0 auto;
display: block;
border-radius: 5px;
margin-bottom: 5px;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a { text-decoration:none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: #a5d4ff; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; line-height:1; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before { content: '\f002'; }
/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
.flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
最佳答案
您可以使用具有 RTL 支持的更新版本的 FlexSlider:https://github.com/layalk/FlexSlider
$('#flexslider').flexslider({rtl:true});
您还需要在 flexslider.css
文件之后包含 flexslider-rtl.css
文件。
关于css - 将 Body direction rtl 与 FlexSlider 轮播一起使用会导致空白 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25839049/
当调用 func didBegin(_ contact: SKPhysicsContact) 的 SKScene 中发生接触时,需要确定哪个 SKPhysicsBody 是contact.bodyA
HTML: CSS: body { width : 1000px ; } header { width : 100% ; } 如果有这样的代码, 我认为页眉的宽度将与主体的
我刚刚通过网站完成设计,现在我正在尝试将整个 body 布置成一个整体,而不是不断重复的瓷砖。请问我该怎么做? 我不确定我说的是否有道理,但就像一张墙纸在拉伸(stretch),而不是 30 个小瓷砖
我试图在我的内部包装器上获得一个滚动条,而不是主体本身: CSS body { overflow: hidden; } #body_wrap { overflow-y: auto;
body { margin: 0px; border: 1px solid black; } #head { text-align: center; background: linea
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
我试图了解此 CSS 规则将应用于哪些元素: body h1, body .h1 { font-family: 'Open Sans', sans-serif !important;
此问题与使用 Jade templates 有关与 Express.js . 我知道当我写 layout.jade其中包含: !!! html body != body hea
我正在尝试为 body 设置不透明度。但是,我遇到了一个问题。 在body 上设置不透明度时,只有它的内容会受到影响。 背景不受不透明度的影响。 $("button").click(function(
我的游戏中有两个对象:球和星星 球是静态或动态的物体。 对于明星: 我需要知道星星何时与球相撞 但它需要穿过小球并且不受碰撞影响 我应该怎么做? 谢谢 袜套 最佳答案 您想使用 Sensors (6.
我以前问过这个问题,但所有答案都不起作用,所以我有一个示例页面,webpage .我有一个重新调整大小的菜单,我想在菜单外单击时关闭菜单,以及在第一次切换下拉菜单时让主体向下动画,这样下拉菜单就不会隐
我有一个漂浮在我其余内容上的井。我遇到的问题是,当它加载页面时,它会下推其余内容。我该如何更改它以便它悬停在所有内容上并且不会在页面加载时将内容下推。 这是页面加载的图像。 这是向下滚动页面的图片 请
在我的代码中我有这个: #body { background-color: #efeeef; clear: both; padding-bottom: 35px; } 还有这个
我想做以下事情。 $("a").click(function (event) { event.preventDefault(); $.get($(this).attr("href"),
在documentation在其他地方,我看到使用了 Body 但不知道它是什么。 谁能解释一下这三个选项是什么意思? from fastapi import Body from pydantic i
我试图在 body 加载后触发一个功能。我知道你可以从 body 标签中做到这一点,但如果可能的话,我更愿意从 JS 中做到这一点。 例如:document.getElementsByTagName(
在 Pymunk 中,当我旋转一个物体时,它的形状并没有旋转。当我施加一个冲动时,形状会如预期的那样同步移动。我的谷歌搜索表明 body 的形状应该在 body 旋转时旋转。我是否从根本上误解了旋转?
在我的移动网站/应用程序中使用 jQueryMobile 时,我刚刚开始遇到非常奇怪错误 编辑 我正在添加图片,可能更容易理解问题 edit2 我发现了这个问题。仍然好奇为什么会这样 如果您想查看原
我正在使用 Phaser.js 及其 p2 物理来模拟“流体”。你可以在this中看到创建一种流体体的示例(归功于 John Watson)。唯一可能的交互是鼠标移动。 我注意到一些有趣的特性可能有助
我认为是后一项, :not(body> element) 说明 body 标签中的所有“元素”元素。这是否与 同义 body >:not(element) ?? 最佳答案 body >:not(ele
我是一名优秀的程序员,十分优秀!