因此,在下面的图片中,我成功制作了一个旋转木马,但问题是下一个按钮位于页面的白色面上。我试图扩大轮播的大小,但最终落在该类别的容器下方。
//not a css but the style section i just separated it.
<style type="text/css">
#carouselExampleControls .list-group {
position:middle;
top:0;
right:5px;
}
#carouselExampleControls.list-group-item {
border-radius:0px;
cursor:pointer;
}
#carouselExampleControls.list-group .active {
background-color:#eee;
}
@media (min-width: 802px) {
#carouselExampleControls {padding-right:34.3333%;}
#carouselExampleControls .carousel-controls {}
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
@media (max-width: 802px) {
.carousel-caption p,
#carouselExampleControls .list-group {}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three unequal columns that floats next to each other */
.column {
float: auto;
padding: 0px;
}
/* Left and right column */
.column.side {
width: 20%;
padding-left: 30px;
background-color: lightblue;
}
/* Middle column */
.column.middle {
width: 100%;
padding-left: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 100%) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
<br>
<div class="row" style="padding-left: 300px;">
<div class="column side" >
<h2>Category</h2>
<ul>
<li class="cat-item cat-item-32"><a href="http://demo.mysterythemes.com/easy-store/product-category/winter-collection/" >Winter Collection</a>
</li>
<li class="cat-item cat-item-18"><a href="http://demo.mysterythemes.com/easy-store/product-category/women-collection/" >Women Collection</a>
</li>
</ul>
</div>
<div class="column middle" style="width: 1100px">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/1img.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/2img.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/3img.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
因此,当我尝试使用
<div class="column middle" style="width: 1200px">
结果将变成这样。
所以我想要的结果只是将轮播固定到与已设置的边距对齐,并显示下一个按钮“>”。我该如何实现?帮我吧。
答案 0 :(得分:0)
您可以尝试绝对定位锚链接,这样
.column a{
position:absolute;
right: 0;
top:100;
}
或者更具体一点,您可以定位nth-child(1)和nth-child(2)
所以:
.column a{
position:absolute;
top:100;
}
.column a:nth-child(1){
left:0;
}
.column a:nth-child(2){
right:0;
}
然后您要做的就是调整以适合您的需求。希望这会有所帮助。