Question

我想将图片对齐滑块的最右边，我确实尝试了margin-left但是它不适用于所有尺寸的屏幕。我想让它具有响应性，以便在所有尺寸的屏幕上图片保持最左边。请帮忙。下面是滑块的代码。

＆＃13;

   


/********************************/
/*       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){
      
}

＆＃13;

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

＆＃13;

Answer 1

margin-left将在元素的左侧创建一个空格，但除非该值是可变的（如95vw），否则该位置将不会响应。

你应该使用position或float来达到预期的效果，具体取决于你想要的那一面（你说得极右，然后是极左）。

例如：

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

或

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

我注意到如果你在旋转木马上使用jQuery插件，可能会有jQuery中的样式表或注入样式影响幻灯片的位置。

我想将图片对齐滑块的最右侧（它应该响应）

1 个答案: