【发布时间】：2024-01-14 20:25:01
【问题描述】：
像这样在图片中显示，我正在尝试但没有发生任何事情我该怎么办？
滑块
我在这里
<div class="carousel-inner" role="listbox">
<div class="item active pic">
<div class="container1 container">
<h1><a href="#">A WORLD OF TOMORROW </a></h1>
<h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IAGE</a></h2>
<p><a href="#">Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</a></p>
</div>
<img src="img/SOT_banner1.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1><a href="#">A WORLD OF TOMORROW </a></h1>
<h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
<p><a href="#">11-12 March, 2017</a></p>
</div>
<img src="img/SOT_banner2.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1><a href="#">A WORLD OF TOMORROW </a></h1>
<h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
<p><a href="#">Pak-China Friendship Centre</a></p>
</div>
<img src="img/SOT_banner3.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1><a href="#">A WORLD OF TOMORROW </a></h1>
<h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
<p><a href="#">More than 40 panel discussions, debates, interactive workshops, performances and much, much more</a></p>
</div>
<img src="img/SOT_banner4.jpg" >
</div>
</div>
</div>
</div>
<!-- slider-->
这里的css
.container1{
position:absolute;
width:40%;
height:auto;
margin-top:150px;
text-align:center;}
.pic{
width:100%;
position:relative;}
.upper{
position:relative;
width:30%;
height:500px;
background-color:#F00;
float:right;}
【问题讨论】：
-
您使用的是什么滑块库？您尝试从哪个网站复制布局？
-
这是我要复制的网站schooloftomorrow.beaconhouse.net
-
我正在使用 twitter bootstrap 3 crousal @alljamin
-
该网站所做的只是在轮播上放置一个绝对 div。您只需将它们放在同一个容器中即可。该容器应该是位置：相对。轮播 div 和覆盖 div 都应该绝对定位。将覆盖 div 放在轮播 div 之后，使其显示在上面。
-
thnx 它确实有效@user721856