Question

我的目标是使用kenwheeler的光滑滑块构建一个全屏叠加图像滑块。

我已经有了全屏叠加（div1），里面有一个div（div2）和这个div周围的一些边距。

现在我的问题：
我想将滑块（div3）放入div2，与div2的大小无关。如果滑块的宽度更大，高度更小，则顶部和底部的距离应更大;如果滑块的高度更高且宽度更小，则左侧和右侧的距离应该更大。

这就是我已经拥有的东西：

#div1{
	position: fixed;
	display: block;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	z-index: 9999;
	
	background-color: rgba(0,0,0,.7);
}
#div2{
	margin: 20px;
	margin-bottom: 100px;
	
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: green;
				
	display: flex;
	align-items: center;
}
#div3{
	width: auto;
	max-width: 100%;
	max-height: 100%;
	
  background: blue;
}
#div3 div{
	width: 100%;
	height: 100%;
	
	margin: 0 auto;
}
#div3 div img{
	display: block;
	margin: auto;
	
	height: auto;
	max-height: 100%;
	
	width: auto;
	max-width: 100%;
}

<div id="div1">
  <div id="div2">
  	<div id="div3">
  		<div><img src="images/models/own/001_racecar/P02.png" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P03.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P04.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P05.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P06.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P07.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P08.JPG" alt=""></div>
  		<div><img src="images/models/own/001_racecar/P09.JPG" alt=""></div>
  	</div>
  </div>
</div>

我知道，我不太善于解释。所以，如果您有疑问，请问我我希望你能帮助我。

感谢
TobiasWälde

Answer 1

很抱歉，如果我弄错了你想要的是确保滑块始终在父div中，即你的情况下div2和div2应该随着滑块的内容而增长。我是对的吗？

你可以使用＆＃34; container＆＃34;引导类。我为它做了一个简单的jsfiddle。如果有效，请告诉我。

https://jsfiddle.net/94kt3mwd/1/

<div id="div1" class="container col-lg-12 col-sm-12 col-xs-12 col-md-12" style= "background-color:#ff0;padding:2%">
  <div id="div2" class="container" style="background-color:#00f" align="center">
    <h1>
    HELLO! Add Text Here..
    </h1>
  </div>
</div>

希望它有所帮助。

HTML div应该完全包含另一个div

1 个答案: