html - CSS - 在水平滚动上定位项目的问题
问题描述
当我向右滚动一行时，我的位置有问题。代码：https ://codepen.io/olastanislawska/pen/GRqooyG （移动视图）。向右滚动第一行并突出显示第一行中的电影类，然后是第二行。首先缺少一些东西，我不知道如何解决。
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
#app {
height: 100%;
position: relative;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
#app::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
z-index: -1000;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
-webkit-filter: blur(10px);
filter: blur(10px);
}
#movies .categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 15;
}
#movies .categories .category {
position: relative;
margin: 15px;
}
#movies .categories .category .movies {
overflow-x: auto;
white-space: nowrap;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#movies .categories .category .movies .movie {
min-width: 90%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5%;
position: relative;
text-align: center;
overflow-y: hidden;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@media (min-width: 350px) {
#movies .categories .category .movies .movie {
min-width: calc(50%);
}
}
#movies .categories .category .movies .movie.active {
color: #fff;
}
#movies .categories .category .movies .movie.active .image::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
background-color: rgba(54, 54, 54, 0.75);
position: absolute;
border: 2px solid deeppink;
}
#movies .categories .category .movies .movie.active .title {
position: absolute;
top: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content {
position: absolute;
bottom: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
#movies .categories .category .movies .movie .image {
width: 100%;
height: 200px;
background: red;
}
#movies .categories .category .movies .movie .title {
position: absolute;
top: -100%;
width: 100%;
}
#movies .categories .category .movies .movie .content {
position: absolute;
bottom: -100%;
width: 100%;
}
.slider-btns {
position: absolute;
right: 15px;
}
.slider-btns i {
font-size: 22px;
cursor: pointer;
}
#navigation {
padding: 15px 0;
margin: 0 10px;
overflow-x: scroll;
}
#navigation ul.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 16px;
}
#navigation ul.nav li {
padding: 5px 15px;
}
#navigation ul.nav li.active {
background-color: deeppink;
border-radius: 25px;
font-weight: bold;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
margin-left: 5px;
}
#slider {
width: 100vw;
height: 75vh;
margin: 0 auto;
position: relative;
z-index: 1000;
}
#slider::before {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
position: absolute;
background: black;
background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(25%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%);
}
#slider .logo {
padding: 15px;
position: absolute;
font-family: 'Dancing Script', cursive;
font-size: 30px;
color: #fff;
text-shadow: 0 0 10px deeppink;
}
#slider .image {
height: 100%;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider .content {
position: absolute;
bottom: 10%;
right: 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#slider .content .title {
width: 100%;
}
#slider .content .title h3 {
text-align: center;
color: deeppink;
min-width: 100px;
padding: 5px;
border-radius: 10px;
font-size: 18px;
margin: 10px 0;
}
#slider .content .description {
max-width: 100%;
position: relative;
overflow-wrap: break-word;
}
#slider .content .description p {
text-align: center;
color: #fff;
font-size: 14px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#slider .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}
/*# sourceMappingURL=main.css.map */ <body>
<div id="app">
<div id="slider">
<div class="logo">MovieApp</div>
<div class="image"></div>
<div class="content">
<div class="title"><h3>- Title -</h3></div>
<div class="description">
<p>
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description
</p>
</div>
<button>More</button>
</div>
</div>
<div id="navigation">
<ul class="nav">
<li data-category="top" class="nav-item active">Top</li>
<li data-category="comedy" class="nav-item">Comedy</li>
<li data-category="horror" class="nav-item">Horror</li>
<li data-category="documentary" class="nav-item">Documentary</li>
<li data-category="thriller" class="nav-item">Thriller</li>
<li data-category="musical" class="nav-item">Musical</li>
</ul>
<div class="search"></div>
</div>
<div id="movies">
<div class="slider-btns">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
</div>
<div class="categories">
<div data-category="comedy" class="category">
<div class="movies">
<div data-item="1" class="movie active">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="horror" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="documentary" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="thriller" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="musical" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>解决方案
推荐阅读
- python - Python Mlens Ensemble：KeyError：“[Int64Index([... dtype='int64', length=105)] 均不在 [columns] 中”
- google-sheets - 如何将此工作表重新格式化为更加表格？
- mysql - 连接三个表中的三列，然后将第一列中的不同值按第三列中的最大值分组
- python - 附加到 h5 文件
- javascript - 使用 v-cloak 不能处理异步请求
- sorting - 嵌套 LOD 中的值 - Max 中的 Max
- xml - 函数确定 xquery 中的两个集合是否相等
- django - 我正在尝试使用文本选择，但收到此错误 - python 'appstat' 无法转换为 MySQL 类型”，无
- scala - 如何将算术 Scala parer 组合器结果转换为 AST
- apache-spark - 具有 StructType 的意外元组 - 使用模式创建数据框时 pyspark 中的错误