- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题
我有一个滑动 slider :http://codepen.io/kerowan/pen/xqYrwJ (例如通过给 .product-info-wrapper
大约 100 像素的固定高度来重新创建问题)
在幻灯片中,有一个图像和一个信息框,最初看起来像这样:
当我单击“Kurzinfo”时,该框需要展开并最终看起来像这样(.swiper-container
在 NEW 徽章之后结束,因此它必须流过 swiper-container):
问题是,.swiper-container
有一个 overflow: hidden;
属性,隐藏继续到右侧的幻灯片。
我尝试了什么?
1) 我尝试过更改overflow: hidden;
在 .swiper-container
至overflow-x: hidden;
试图隐藏向右流动的幻灯片,但显示向下溢出的东西。这导致 .swiper-container
只需添加一个滚动条,让您向下滚动以查看应该溢出的内容。
2) 我尝试过更改position: absolute;
在 .product-info-wrapper
(包装盒子和徽章)到position: fixed;
,因为我读到 position: fixed;
忽略了溢出属性.然而,这似乎并不能解决问题。
我还没有尝试过其他任何方法,只是因为我不知道任何其他解决方案。
片段
我在这里粘贴了这段代码,但它不起作用,因为我使用了 SCSS,不幸的是没有时间将它重写为纯 CSS。但是,如果上面的链接应该死,可以复制到 codepen。
$(document).ready(function() {
var productsInFocus = new Swiper ('.products-in-focus', {
nextButton: '.product-focus-next',
prevButton: '.product-focus-prev',
slidesPerView: 4,
loop: false,
spaceBetween: 20
});
});
.content-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.product-wrapper {
position: relative;
margin-bottom: 1rem * 5;
margin-top: 1rem * 5;
.swiper-slide {
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
min-height: 230px;
.product-badge-wrapper {
position: absolute;
bottom: 0;
right: 0;
.product-badge {
position: relative;
width: 100px;
overflow: hidden;
&.red {
&:before,
&:after {
border-color: #CF043C;
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: darken(#CF043C, 10%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&.dark-gray {
&:before,
&:after {
border-color: lighten(#000, 37.4%);
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: lighten(#000, 13.5%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
background-color: transparent;
border-color: lighten(#000, 73%);
}
&:before {
top: 20px;
right: 0;
bottom: 0;
}
&:after {
bottom: auto;
left: -1px;
top: -10px;
border-style: solid;
border-width: 0 0 75px 75px;
background-color: transparent;
border-left-color: transparent;
width: 100px;
}
.product-badge-content {
height: 43px;
padding-right: 5px;
padding-left: 22px;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
text-transform: uppercase;
font-weight: 700;
position: relative;
z-index: 10;
color: #fff;
&.text-small {
font-size: .7rem;
font-weight: 400 !important;
}
&:before {
content: "";
position: absolute;
left: 11px;
bottom: 0;
display: block;
border-style: solid;
border-color: lighten(#000, 37.4%);
border-left-color: transparent;
border-right-color: transparent;
border-width: 10px 10px 0 10px;
}
}
}
}
.product-info-wrapper {
position: absolute;
bottom: 0;
max-width: 100%;
width: 100%;
padding-bottom: 10px;
.product-info {
position: relative;
padding: 1rem * .5;
padding-right: 1rem * 2;
overflow: hidden;
&-link {
display: block;
a {
color: lighten(#000, 37.4%);
transition: color 400ms ease-in-out;
&:hover {
color: #CF043C;
text-decoration: none;
}
}
}
&-price {
color: #CF043C;
&-del {
color: lighten(#000, 37.4%);
text-decoration: line-through;
font-size: .9rem;
}
}
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: lighten(#000, 93.5%);
border-color: lighten(#000, 93.5%);
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
}
}
.product-focus-prev,
.product-focus-next {
position: absolute;
color: lighten(#000, 37.4%);
background-image: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.product-focus-prev {
left: -1rem * 10;
}
.product-focus-next {
right: -1rem * 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b13050afbe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="content-wrapper narrow products-in-focus">
<div class="product-wrapper">
<div class="swiper-container products-in-focus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-7">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-5 text-right">
<div class="product-info-price">CHF 34.00</div>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge dark-gray">
<div class="product-badge-content text-center">
%
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link"><a href="#">Kurzinfo</a></span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-focus-prev"><i class="fa fa-chevron-left"></i></div>
<div class="product-focus-next"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
</div>
最佳答案
你可以加:
.swiper-slide {
padding-bottom: 30px;
}
关于html - 在 Swiper slider 中显示 "overflow: hidden"之外的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42908632/
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。 为了阐明我的意思,在 this example我想知道“This is hidden”是div的隐藏部分。 这
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
我正在使用 jQuery 制作幻灯片,我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
如果我有一个样式为 overflow: hidden; 的 div,我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条,所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
我有一个 UIImageView,在表格单元格中有一个自定义类,它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
我正在创建一个网站,在一个 div 中我有一个视频,但我不想在移动设备上显示这个视频,所以我使用 hidden-xs 和 hidden-sm,到目前为止一切顺利。 但是,我的问题是,当我使用这些类时,
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。 我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
我通过CSS的草图创建了一个菱形,它位于一个圆圈的左上角。 我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer? 这是 project 的代码笔. html
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
在使用 Angular Material 时,我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗?但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
我正在阅读有关 aria 使用的一些内容,并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div,我设置了 overflow:scroll
input[type=hidden] 和 visibility : hidden; 有什么区别? 最佳答案 第一个是输入元素,第二个是CSS2中的样式。 visibility: hidden; vis
我遇到了一个奇怪的问题,似乎与浏览器相关(IE9 及更低版本与 IE11),但想知道为什么会出现奇怪的行为。 问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时,它们将设置为 NO,因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换? 最佳答案
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出,没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案,但还有另一个要求 - 每行都有一个绝对 d
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子 主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html 的“隐藏”属性是一个 bool 值,不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样?光有存在感就够了吗?或者它是否需要设置值“true”? 最佳答案 aria-hid
在我的页面上,我有一个导航菜单和两个内容容器。 内容容器使用overflow:hidden 以便一次只有一个子div 显示。 我希望导航链接充当相关内容的激活器,以便在容器中滚动查看。 因此,例如,如
我是一名优秀的程序员,十分优秀!