如何修复div与父div的关系？

我有父div和7子div，我想要两个div来修复父div的极端，并且不会相对于父div移动，而是随父div一起移动（这意味着如果我更改了padding的身体divs的安排应该保持不变）。剩下的5个div在父级div的x方向上滚动。如何修复div与父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); 

    } 
}

来源

2017-07-19 rahul Kushwaha

使用位置和设置。 –

但它不起作用，（margin：0 auto;）停止在父div上工作。 –

你可以换你.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); 
 

 
    } 
 
}

<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"> \t \t 
 
    </div> 
 
    <div class="card"> \t \t 
 
    </div> 
 
    <div class="card"> \t \t 
 
    </div> 
 
    <div class="card"> \t \t 
 
    </div> 
 
    <div class="card"> \t \t 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-19 08:32:26 DavidDomain

感谢它的工作。 –

所有.cards DIV应该是另一个DIV的孩子，在这里我添加了一个.cardcontainer DIV，这样父DIV应该有3个孩子的，2按钮和card container。此外，需要在.cardcontainer中使用display: -webkit-box。

此外，我已经设置了width的.cardcontainer to90％，您可以相应地调整它。

scroll CSS应该在.cardconatiner格，而不是在.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; 
 
    } 
 
}

<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>

来源

2017-07-19 08:32:38

如何修复div与父div的关系？

回答

相关问题