我想将图片与滑块的极端右边保持一致(应该是响应的)



我想将图片与滑块的极端对齐,我确实尝试了边距左侧,但它在屏幕的所有尺寸中都无法工作。我也想使其响应迅速,以便图片在屏幕的所有尺寸中保持最左侧。请帮忙。以下是滑块的代码。

   
/********************************/
/*       Slides backgrounds     */
/********************************/
#first-slider .slide1 {
  
    background-color: blue; 
      background-size: cover;
    background-repeat: no-repeat;
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
      
}
@media screen and (max-width: 640px){
      
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,500" rel="stylesheet">
</head>
<body><div id="first-slider">
    <div id="carousel-example-generic" class="carousel slide carousel-fade">
       
        <div class="carousel-inner" role="listbox">
         
            <div class="item active slide1">
                <div class="row"><div class="container">
                    <div class="col-md-7 text-left">
                        
                     
                        <a style="background-color: #272a2e; font-weight: 500; font-size: 14px; border: black; " href="#" class="btn btn-info btn-lg da-link">
                  IP CAMERAS </a>
                     </div>
                    <div class="col-md-5 text-right">
                        <img style="" width="100%" height="100%" data-animation="animated zoomInLeft" src="http://grandstream.com.pk/img/cam.png">
                    </div>
                </div></div>
            </div>
            <!-- Item 3 -->
          
    
        </div>
        <!-- End Wrapper for slides-->
     
    </div>
</div></body>
</html>

margin-left将在元素的左侧创建一个空间,但是除非值是可变的(如95VW),否则位置不会响应。

您应该使用positionfloat来实现所需的效果,具体取决于您想要的一侧(您说明了极端右,然后是最左侧)。

例如:

<style>
.carousel {
  position: relative; }
.slide {
  position: absolute;
  right: 0; } // or left
</style>

<style>
.slide {
  float: right; } // or left
</style>

我会注意到,如果您使用的是旋转木马的jQuery插件,则可能会有jQuery的样式或注入样式会影响幻灯片的位置。

最新更新