我有父div和7子div我想要两个div来修复父div的极限并且不会相对于父div移动但是与父div一起移动(这意味着如果我改变了填充的div的排列应保持不变)。其余的5 div在父div中沿x方向滚动。
但问题是我的代码修复div仍然固定在窗口或与其他div一起滚动。
这是我的JSFiddle。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test6</title>
<link rel="stylesheet" type="text/css" href="test6.css">
</head>
<body>
<div class="list">
<div class="button button-left"></div>
<div class="button button-right"></div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</body>
</html>
CSS:
body{
margin-top: 200px;
}
.list{
width: 1100px;
height: 400px;
margin: 0 auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
position: relative;
}
.button{
display: table;
top: 150px;
width: 50px;
height: 100px;
background-color: rgba(100, 100, 200, 0.8);
position: absolute;
/*position: fixed;*/
}
.button-left{
left: calc(50% - 550px);
border-radius: 0 20px 20px 0 ;
}
.button-right{
right: calc(50% - 550px);
border-radius: 20px 0 0 20px;
}
.card{
display: inline-block;
height: 360px;
width:250px;
margin: 20px 10px;
border-radius: 10px;
background-color: #505050;
}
@media screen and (max-width: 1100px){
.button-left{
left: 0;
}
.button-right{
right: calc(100% - 1100px);
}
}
答案 0 :(得分:1)
所有.cards
div应该是另一个div的子节点,在这里我添加了一个.cardcontainer
div,以便父div应该有3个子节点,2个按钮和card container
。此外,需要在display: -webkit-box
中使用.cardcontainer
。
另外,我已将width
设为.cardcontainer to
90%`,您可以相应地设置它。
scroll
css应位于.cardconatiner
div中,而不是.list
div
.cardcontainer {
position: relative;
overflow-x: auto;
margin: 0 auto;
width: 90%;
display: -webkit-box;
}
.list {
width: 100%;
position: relative;
}
.button {
top: 150px;
width: 50px;
height: 100px;
background-color: rgba(100, 100, 200, 0.8);
position: absolute;
z-index: 1;
}
.button-left {
left: 0;
border-radius: 0 20px 20px 0;
}
.button-right {
right: 0;
border-radius: 20px 0 0 20px;
}
.card {
/*display: inline-block;*/
height: 360px;
width: 250px;
margin: 20px 10px;
border-radius: 10px;
background-color: #505050;
}
@media screen and (max-width: 1100px) {
.button-left {
left: 0;
}
.button-right {
right: 0;
}
}
&#13;
<body>
<div class="list">
<div class="button button-left"></div>
<div class="button button-right"></div>
<div class="cardcontainer">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</div>
</body>
&#13;
答案 1 :(得分:0)
您可以将.list
元素包装在容器中,并为控件添加额外的div。将控件的额外div的位置规则设置为relative
,这样可以使控件按钮保持绝对位置。控件包含不需要是列表本身的子项。
这是一个例子
body{
margin-top: 200px;
}
.list {
width: 1100px;
height: 400px;
margin: 0 auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
position: relative;
}
.controls {
position: relative;
width: 100%;
z-index: +1;
}
.button {
display: table;
top: 150px;
width: 50px;
height: 100px;
background-color: rgba(100, 100, 200, 0.8);
position: absolute;
/*position: fixed;*/
}
.button-left {
left: calc(50% - 550px);
border-radius: 0 20px 20px 0 ;
}
.button-right {
right: calc(50% - 550px);
border-radius: 20px 0 0 20px;
}
.card{
display: inline-block;
height: 360px;
width:250px;
margin: 20px 10px;
border-radius: 10px;
background-color: #505050;
}
@media screen and (max-width: 1100px){
.button-left{
left: 0;
}
.button-right{
right: calc(100% - 1100px);
}
}
&#13;
<div class="container">
<div class="controls">
<div class="button button-left"></div>
<div class="button button-right"></div>
</div>
<div class="list">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</div>
&#13;